.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(50rem, calc(var(--vh, 1vh) * 100), 80rem);
  
  & .home-hero__slider {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    opacity: 40%;
    & .swiper-wrapper {
      height: 100%;
      width: 100%;
      & .swiper-slide {
        height: 100%;
        width: 100%;
        & img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.home-products {
  &::before,
  &::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    min-width: 100rem;
    height: 25rem;
    background-color: hsl(from var(--ink) h s l / 1%);
    backdrop-filter: blur(8px);
  }
  &::before {
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    top: 0;
    left: 0;
  }
  &::after {
    clip-path: polygon(100% 100%, 0% 100%, 100% 0);
    bottom: 0;
    right: 0;
  }
  
  & .home-products__typo {
    position: absolute;
    top: 17.375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 121.6%;
    @media (min-width: 768px) {
      top: 25rem;
    }
    @media (min-width: 1024px) {
      top: 5.5rem;
      right: 0;
      left: auto;
      transform: translateX(2.6941362916%);
      width: 78.875%;
      max-width: 78.875rem;
    }
    & img {
      width: 100%;
    }
  }
  & .home-products__content {
  	& * {
      position: relative;
    }
    &::before {
      content: "";
      position: absolute;
      top: -3.75rem;
      left: -5.625rem;
      aspect-ratio: 172 / 196;
      width: 10.75rem;
      background-image: url("data:image/svg+xml,%3Csvg width='172' height='196' viewBox='0 0 172 196' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.8'%3E%3Ccircle cx='63.5' cy='60.5' r='60.5' fill='%23FF0000' style='mix-blend-mode:screen'/%3E%3Ccircle cx='117.5' cy='104.5' r='54.5' fill='%230000FF' style='mix-blend-mode:screen'/%3E%3Ccircle cx='51' cy='145' r='51' fill='%2300FF00' style='mix-blend-mode:screen'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

.home-section-images {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a1 a1 a2 a2 a3 a3 a3 a3"
    "a1 a1 a2 a2 a3 a3 a3 a3"
    "a4 a4 a2 a2 a3 a3 a3 a3"
    "a4 a4 a2 a2 a5 a5 a6 a6"
    "a7 a7 a7 a7 a5 a5 a6 a6"
    "a7 a7 a7 a7 a5 a5 a6 a6";
  height: 18.75rem;
  @media (min-width: 768px) {
    height: 28rem;
  }
  @media (min-width: 1024px) {
    height: 35rem;
  }
  @media (min-width: 1200px) {
    height: 51.25rem;
  }
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  & img:nth-child(1) {
    grid-area: a1;
  }
  & img:nth-child(2) {
    grid-area: a2;
  }
  & img:nth-child(3) {
    grid-area: a3;
  }
  & img:nth-child(4) {
    grid-area: a4;
  }
  & img:nth-child(5) {
    grid-area: a5;
  }
  & img:nth-child(6) {
    grid-area: a6;
  }
  & img:nth-child(7) {
    grid-area: a7;
  }
}