.campaign {
  font-family: "DM-Serif", serif;
  letter-spacing: 0.5px;
  font-size: 18px;
}

.hero-img-container,
.hero-img-mini-container,
.featured-img-container,
.date-container {
  position: relative;
}

.hero-img-container {
  cursor: pointer;
}

/* Makes it a square */
.hero-img-container::before,
.hero-img-mini-container::before,
.featured-img-container::after,
.date-container::after {
  content: "";
  float: left;
  padding-bottom: 100%;
}

/* Makes hero image darker on hover */
.hero-img-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--bs-border-radius-lg) !important;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-img-container:hover::after {
  opacity: 1;
}

/* Makes image fit the square */
.hero-img,
.featured-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-text {
  font-family: "Glorify", sans-serif;
}

.hero-text-sub {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

/* Hero Text on xxl screens */
.hero-text-xxl {
  font-size: 60px;
}

.hero-text-l {
  font-size: 30px;
}

.hero-text-md {
  font-size: 30px;
}

.events {
  font-family: "DM-Serif", serif;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}

.bottom-right {
  font-family: "DM-Serif", serif;
  z-index: 2;
  pointer-events: none;
}

a[href="#featured-products"] {
  scroll-behavior: smooth;
}

/* Featured product section */
#featured-products,
#upcoming-events {
  font-family: "Glorify", sans-serif;
  font-weight: 200;
}

/* SWIPER.JS STUFF */
.swiper-container {
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  min-height: 0;
  min-width: 0;
}

.swiper-pagination-bullet-active {
  background: rgb(57, 48, 34) !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 25px !important;
  color: rgb(57, 48, 34);
}

div.swiper-slide p {
  font-weight: 500;
}

/* This some how fixes the problem with carousel element having differnt heights */
.swiper-slide {
  height: auto !important;
}

/* Overiding font sizes for events */
.month-fs-events {
  font-size: calc(0.9rem + 0.3vw) !important;
}

.day-fs-events {
  font-size: calc(4rem + 1.5vw) !important;
}

.button:hover {
  background-color: var(--button-hover-color);
  transition: background-color 0.5s ease;
}

.btn-close:focus {
  box-shadow: none;
}

/* XXL screen sizes */
@media (min-width: 1400px) {
  .bottom-right,
  .events {
    font-size: 15px;
  }
}

/* XL screen sizes */
@media (max-width: 1399px) {
  .bottom-right,
  .events {
    font-size: 13px;
  }
}

/* Large screen sizes */
@media (max-width: 1199px) {
  .bottom-right,
  .events {
    font-size: 12px;
  }
}

/* Medium screen sizes */
@media (max-width: 991px) {
}

/* small screen sizes */
@media (max-width: 767px) {
  .bottom-right,
  .events {
    font-size: 10px;
  }
}

/* Target extra small screens and above (Bootstrap "xs" breakpoint, all screens) */
@media (max-width: 575px) {
  .hero-text-sub {
    font-size: 10px;
    line-height: 12px;
  }

  .campaign {
    font-size: 15px;
  }
}