body {
  background-color: var(--gray);
}

.home-reservation-button {
  position: fixed;
  z-index: 5;
  top: 28.4375rem;
  left: -0.625rem;
  width: 7.5rem;
  filter: drop-shadow(var(--elevation-2));
  @media (min-width: 768px) {
    top: 32.5rem;
    left: 1.25rem;
    width: 10rem;
  }
  @media (min-width: 1024px) {
    top: 40rem;
    bottom: 10rem;
    width: 12.5rem;
  }
  @media (min-width: 1200px) {
    bottom: 38.75rem;
    left: 2.5rem;
  }
}

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 11.25rem;
  height: 37.5rem;
  @media (min-width: 768px) {
    height: 50rem;
  }
  @media (min-width: 1024px) {
    height: 60rem;
  }
  @media (min-width: 1200px) {
    height: 67.5rem;
  }
  
  & .home-hero__sliders {
    position: absolute;
    inset: 0;
    display: grid;
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    mask-image: url(/system_panel/uploads/images/bottom-ellipse.png);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--noise-black);
      z-index: 2;
      pointer-events: none;
    }
    & .swiper {
      width: 100%;
      & .swiper-wrapper {
        width: 100%;
        height: 100%;
        & .swiper-slide {
          width: 100%;
          height: 100%;
          & img {
            object-fit: cover;
            width: 100%;
            height: 100%;            
          }
        }
      }
    }
  }
  
  & .home-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 71.75rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  & .home-hero__wave {
    position: absolute;
    bottom: -1.25rem;
    left: 0;
    width: 100%;
    height: 7.875rem;
    @media (min-width: 768px) {
      bottom: -3.5rem;
      height: 12rem;
    }
    @media (min-width: 1024px) {
      bottom: -4.5rem;
      height: 15rem;
    }
    @media (min-width: 1200px) {
      bottom: -8.125rem;
      height: 22.5rem;
    }
  }
}

.home-intro-typo {
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--font-display);
  position: absolute;
  top: -0.5em;
  left: 50%;
  transform: translateX(-50%);
  color: var(--snow);
  font-size: 4rem;
  @media (min-width: 768px) {
    font-size: 9rem;
  }
  @media (min-width: 1024px) {
    font-size: 12rem;
  }
  @media (min-width: 1200px) {
    font-size: 15rem;
  }
}

.home-promises {
  background-color: var(--sand);
  position: relative;
  &::before {
    content: "";
    position: absolute;
    inset: -1px 0;
    background-image: linear-gradient(180deg, #B3B3AC 0%, rgba(179, 179, 172, 0.00) 12%, rgba(179, 179, 172, 0.00) 100%), linear-gradient(180deg, rgba(179, 179, 172, 0.00) 0%, rgba(179, 179, 172, 0.00) 88%, #B3B3AC 100%);
  }
}

.home-promeses-title-dec {
  position: absolute;
  top: -2.5rem;
  right: -3.5rem;
  width: 11.125rem;
  @media (min-width: 768px) {
    top: -3.375rem;
    right: -9.375rem;
    width: 17.5rem;
  }
}

.home-promise-typo {
  position: absolute;
  top: -2.5rem;
  left: -0.625rem;
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--snow);
  @media (min-width: 768px) {
    left: -2.5rem;
  }
  @media (min-width: 1024px) {
    top: -3rem;
    left: -3rem;
    font-size: 6rem;
  }
  @media (min-width: 1200px) {
    top: -5rem;
    left: -5rem;
    font-size: 7.5rem;
  }
}

.home-promise-content {
  @media (min-width: 1024px) {
    margin: 4rem 0 1rem 1rem;
  }
  @media (min-width: 1200px) {
    margin: 7.5rem 0 3rem 1.5rem;
  }
}

.home-flow-title-dec {
  width: 9rem;
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(calc(-50% + 7.5rem));
  @media (min-width: 768px) {
    width: 10rem;
    transform: translateX(calc(-50% + 10rem));
  }
  @media (min-width: 1200px) {
    width: 12rem;
    transform: translateX(calc(-50% + 14.375rem));
  }
}

.home-flow-card {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(calc(-100% + 2px), -50%);
    width: 0;
    height: 0;
    border-top: 0.8125rem solid transparent;
    border-bottom: 0.8125rem solid transparent;
    border-right: 1.25rem solid var(--snow);
  }
}

.home-flow-bg-image {
  position: absolute;
  inset: 0;
  opacity: 35%;
  & img {
    object-fit: cover;
    position: absolute;
    inset: 1px 0;
    width: 100%;
    height: calc(100% - 2px);
  }
  &::before, &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  &::after {
    background-image: linear-gradient(180deg, #ACB2A6 0%, rgba(172, 178, 166, 0.00) 24.04%, rgba(172, 178, 166, 0.00) 100%);
  }
  &::before {
    background-image: var(--noise-black);
    inset: 0;
  }
}

.home-info-card-typo {
  position: absolute;
  top: -0.625rem;
  left: -0.625rem;
  line-height: 1;
  letter-spacing: 0;
  font-size: 7.5rem;
  font-family: var(--font-display);
  color: var(--snow);
  opacity: 10%;
}

.home-gallery-slider .swiper-wrapper {
  transition-timing-function: linear;
}

.home-news {
  & .webgene-blog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    & .webgene-no-items {
      grid-column: span 4 / span 4;
    }
  }
}