.home-hero {
  position: relative;
  height: clamp(50rem, calc(var(--vh, 1vh) * 100), 80rem);
  padding: 2.5rem 1.25rem 7.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  @media (min-width: 768px) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  @media (min-width: 1200px) {
    padding: 15rem 5rem 7.5rem;
  }
  
  & .home-hero__image {
    object-fit: cover;
    position: absolute;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    &.home-hero__image--tl {
      mask-image: url(/system_panel/uploads/images/mask-ellipse--home-hero-tl.png);
      aspect-ratio: 235 / 126;
      width: 19.5625rem;
      top: 3.4375rem;
      left: -2.8125rem;
    }
    &.home-hero__image--br {
      mask-image: url(/system_panel/uploads/images/mask-ellipse--home-hero-br.png);
      aspect-ratio: 414 / 505;
      width: 20.4375rem;
      right: -3.5625rem;
      bottom: -2.8125rem;
    }
    @media (min-width: 768px) {
      &.home-hero__image--tl {
        width: 30rem;
        top: 3rem;
        left: -3rem;
      }
      &.home-hero__image--br {
        width: 23rem;
        right: -3.3125rem;
      }
    }
    @media (min-width: 1200px) {
      &.home-hero__image--tl {
        width: 44.0625rem;
        top: 1.5625rem;
        left: -1.5625rem;
      }
      &.home-hero__image--br {
        width: 25.875rem;
        right: 3.3125rem;
      }
    }
  }
  
  & .home-hero__typo {
    position: absolute;
    display: block;
    height: calc(2rem * 0.8826);
    &.home-hero__typo--tr {
      top: 0.625rem;
      right: 0.625rem;
    }
    &.home-hero__typo--bl {
      bottom: 0.625rem;
      left: 0.625rem;
    }
    @media (min-width: 768px) {
      height: calc(4rem * 0.8826);
      &.home-hero__typo--tr {
        top: 5rem;
        right: 1rem;
      }
      &.home-hero__typo--bl {
        bottom: 2.5rem;
        left: 1rem;
      }
    }
    @media (min-width: 1024px) {
      height: calc(6rem * 0.8826);
    }
    @media (min-width: 1200px) {
      height: calc(7.5rem * 0.8826);
      &.home-hero__typo--tr {
        top: 6.875rem;
        right: 1.875rem;
      }
      &.home-hero__typo--bl {
        left: 1.875rem;
      }
    }
  }
}

& .home-intro-image {
  mask-image: url(/system_panel/uploads/images/mask-ellipse--home-intro.png);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  aspect-ratio: 872 / 625;
  width: 124.5714285714%;
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.home-features-wave {
  left: 0;
  position: absolute;
  top: 10rem;
  width: 100%;
  opacity: 0.5;
  
  & .home-features-wave__1, & .home-features-wave__2 {
    width: 300%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  & .home-features-wave__1 img, & .home-features-wave__2 img {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
  }
  .home-features-wave__1 img {
    left: 0;
    animation: move-wave 4500ms linear infinite reverse;
  }
  .home-features-wave__2 img {
    right: 0;
    animation: move-wave 4500ms linear infinite;
  }
}

@keyframes move-wave {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(33.3333%);
  }
}

.home-business {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(216deg, rgba(255, 210, 0, 0.50) 19.87%, rgba(232, 95, 41, 0.50) 38.7%, rgba(49, 164, 181, 0.50) 56.78%, rgba(40, 171, 135, 0.50) 75.99%); 
  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.75) 25%, #FFF 50%, rgba(255, 255, 255, 0.57) 75%, rgba(255, 255, 255, 0.00) 100%);
  mask-size: 100% 100%;
}

.home-business-slider {
  width: 100%;
  overflow: visible;
  counter-reset: business-count;
  & .swiper-slide a {
    position: relative;
    counter-increment: business-count;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--snow);
    box-shadow: var(--elevation-2);
    border-radius: 2rem;
    padding: 0.625rem;
    & img {
      object-fit: cover;
      aspect-ratio: 3 / 2;
      border-radius: 1.375rem;
      width: 100%;
    }
    --num-size: 6.25rem;
    --num-top: -2.5rem;
    --num-left: -0.625rem;
    &::before {
      content: counter(business-count, decimal-leading-zero);
      line-height: 1;
      letter-spacing: 0;
      font-size: var(--num-size);
      font-family: var(--font-display);
      color: var(--ume);
      position: absolute;
      top: var(--num-top);
      left: var(--num-left);      
    }
    &::after {
      content: "";
      height: 0.875rem;
      width: calc(var(--num-size) - 1rem);
      background-image: url(/system_panel/uploads/images/double-lines.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: calc(var(--num-size) + var(--num-top) - 1rem);
      left: var(--num-left); 
    }
    @media (min-width: 768px) {
      gap: 2rem;
      padding: 2rem;
      & img {
        aspect-ratio: 3 / 2;
        border-radius: 2rem;
      }
      --num-size: 15rem;
      --num-top: -5rem;
      --num-left: -1.5rem;
      &::after {
        width: calc(var(--num-size) - 2rem);
      }
    }
  }
  
  & .swiper-pagination {
    --swiper-pagination-color: var(--ink);
    position: static;
    margin: 0;
    @media (min-width: 768px) {
      flex: 1 1 0%;
    }
  }
  & .swiper-button-prev,
  & .swiper-button-next {
    position: static;
    margin: 0;
  }
  & .swiper-button-next {
    transform: scale(-1);
  }
}