:root {
   --main-size: 1.25rem;
   --body-font: system-ui, sans-serif;
   --heading-font: system-ui, sans-serif;
   --primary-color: #000;
   --secondary-color: #333;
   --tertiary-color: #DDD;
   --xx-large-font-size: clamp(2.5rem, 1.7593rem + 3.7037vw, 5rem);
   --x-large-font-size: clamp(2rem, 1.4815rem + 2.5926vw, 3.75rem);
   --large-font-size: 2.5rem;
   --medium-font-size: 1.5rem;
   --small-font-size: 0.875rem;
   --border-color: #dee2e6;
   --border-radius: .375rem;
}

img {
   max-width: 100%;
   height: auto;
}

/* ==========================================================================
OWL CAROUSEL
========================================================================== */

.owl-carousel {
   --owl-button-size: 2.813rem;
   position: relative;
   &:not(.owl-loaded) {
      display: flex !important;
      opacity: 0;
   }
   .owl-stage {
      display: flex;
      flex-wrap: wrap;
   }
   &.owl-theme {
      .owl-nav {
         margin-top: var(--main-size);
         text-align: unset;
         display: flex;
         justify-content: center;
         gap: calc(var(--main-size) * .5);
         button {
            span {
               display: none;
            }
            &.owl-next {
               transform: rotate(180deg);
            }
         }
         [class*="owl-"] {
            transition: background-color 0.3s ease-out;
            width: var(--owl-button-size);
            height: var(--owl-button-size);
            overflow: hidden;
            background-color: var(--color--primary);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 50%;
            margin: 0;
         }
         [class*="owl-"] {
            margin-block: 0;
         }
         [class*="owl-"]:hover {
            background-color: var(--color-primary-hover);
         }
      }
   }
}

.owl-theme {
   .owl-nav.disabled+.owl-dots {
      margin-top: var(--main-size);
   }
   .owl-dots {
      margin-top: var(--main-size);
      line-height: 1;
      .owl-dot {
         span {
            width: 1rem;
            height: 1rem;
            margin: .25rem;
            background: none;
            border: 1px solid var(--color--primary);
            transition: background .3s ease-out;
         }
         &.active,
         &:hover {
            span {
               background-color: var(--color-primary-hover);
               opacity: 1;
            }
         }
      }
   }
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
   display: none;
}

@media (min-width: 1400px) {
   .is-style-middle-arrows {
      padding: 0 calc(var(--main-size) * 2.5);
      position: relative;
      .owl-carousel {
         .owl-nav {
            margin-top: 0;
            position: absolute;
            top: calc(50% - 1.563rem);
            left: 0;
            width: 100%;
            pointer-events: none;
            justify-content: space-between;
            button {
               margin: 0;
               pointer-events: auto;
            }
            button.owl-prev {
               margin-left: calc(var(--owl-button-size) * -1 - 0.75rem);
            }
            button.owl-next {
               margin-right: calc(var(--owl-button-size) * -1 - 0.75rem);
            }
         }
      }
   }
}

/* ==========================================================================
GENERAL
========================================================================== */

body {
   color: #232217;
}

a {
   color: currentColor;
   text-decoration: none;
   &:hover {
      text-decoration: underline;
   }
}

#main-content {
   position: relative;
   text-align: center;
   .content {
      top: 50%;
      transform: translateY(-50%);
      z-index: 99;
      position: absolute;
      width: 100vw;
      padding: var(--main-size);
   }
   .inner {
      background-color: #cdc3b4;
      padding: calc(var(--main-size) * 2);
      line-height: 1.8;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: .03em;
      max-width: 500px;
      margin-inline: auto;
      a {
         display: block;
      }
   }
}

.owl-carousel {
   img {
      max-width: none;
      width: 100vw;
      height: 100svh;
      object-fit: cover;
   }
}

.animated {
   -webkit-animation-duration: 4s;
   animation-duration: 4s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}

/* ==========================================================================
MEDIA QUERIES
========================================================================== */