.home-hero {
  position: relative;
  overflow: hidden;
  height: 37.5rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  background-image: linear-gradient(180deg, #26BAD4 24.04%, #97DAE5 66.35%, #E6E3CC 78.37%);
  &::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--snow);
    opacity: 20%;
  }
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-column: span 2 / span 2;
    &:nth-of-type(5),
    &:nth-of-type(6),
    &:nth-of-type(7),
    &:nth-of-type(8) {
      grid-column: span 1 / span 1;
    }
  }
  & .home-hero__title {
    grid-column: span 6 / span 6;
    grid-row: span 2 / span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &::before,
    &::after {
      content: "";
      aspect-ratio: 3 / 2;
      width: 1.875rem;
      border-top: 3px solid var(--snow);
      border-left: 3px solid var(--snow);
      position: absolute;
    }
    &::before {
      top: 1.25rem;
      left: 1.25rem;
    }
    &::after {
      right: 1.25rem;
      bottom: 1.25rem;
      transform: scale(-1);
    }
    & > img {
      width: 75%;
    }    
  }
  @media (min-width: 768px) {
    & > img {
      &:nth-of-type(5),
      &:nth-of-type(6),
      &:nth-of-type(7),
      &:nth-of-type(8) {
        grid-column: span 2 / span 2;
      }
    }
    & .home-hero__title {
      grid-column: span 4 / span 4;
      &::before,
      &::after {
        width: 2.5rem;
      }
      &::before {
        top: 1.5rem;
        left: 1.5rem;
      }
      &::after {
        right: 1.5rem;
        bottom: 1.5rem;
      }
      & > img {
        width: 70%;
      }
    }
  }
  @media (min-width: 1024px) {
    height: 45rem;
    & .home-hero__title {
      &::before,
      &::after {
        width: 3.75rem;
      }
      &::before {
        top: 2rem;
        left: 2rem;
      }
      &::after {
        right: 2rem;
        bottom: 2rem;
      }    
    }
  } 
  @media (min-width: 1200px) {
    height: clamp(50rem, calc(var(--vh) * 100), 80rem);
    & .home-hero__title {
      &::before {
        top: 2.5rem;
        left: 2.5rem;
      }
      &::after {
        right: 2.5rem;
        bottom: 2.5rem;
      }    
    }
  }
  
  & .home-hero__sidebar {
    position: absolute;
    inset: 0 0 0 auto;
    padding: 2rem 0.675rem 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    & > p {
      writing-mode: vertical-rl;
      white-space: nowrap;
      line-height: 1.25;
      letter-spacing: 0.04em;
      font-weight: 400;
      font-size: 0.875rem;
      color: var(--snow);
    }
    & a > img {
      width: 1.25rem;
    }
    @media (min-width: 768px) {
      padding-right: 2.5rem;
      & > p {
        font-size: 1rem;
      }
      & a > img {
        width: 1.5rem;
      }
    }
  }
}

.home-intro-typo-1 {
  width: 5.5rem;
  position: absolute;
  top: -6rem;
  left: -0.5rem;
}
.home-intro-typo-2 {
  width: 5.625rem;
  position: absolute;
  top: -6rem;
  right: -0.625rem;
}
@media (min-width: 768px) {
 .home-intro-typo-1 {
    width: 11.5rem;
    top: -7rem;
    left: -2.5rem;
  }
  .home-intro-typo-2 {
    width: 10.5rem;
    top: -3rem;
    right: -2.5rem;
  } 
}
@media (min-width: 1024px) {
 .home-intro-typo-1 {
    width: 14.5rem;
    top: -10rem;
    left: -3.5rem;
  }
  .home-intro-typo-2 {
    width: 13.5rem;
    top: -4rem;
    right: -3.5rem;
  } 
}
@media (min-width: 1200px) {
 .home-intro-typo-1 {
    width: 21.5rem;
    top: -14rem;
    left: -8.3125rem;
  }
  .home-intro-typo-2 {
    width: 22.1875rem;
    top: -9.3125rem;
    right: -7.75rem;
  } 
}

.home-intro-bg-image {
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  overflow: hidden;
  opacity: 50%;
  position: absolute;
  box-shadow: var(--elevation-2);
  filter: blur(2px);
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  &.home-intro-bg-image--1 {
    width: 15rem;
    top: -9.125rem;
    left: -7.5rem;
  }
  &.home-intro-bg-image--2 {
    width: 27.5rem;
    top: -18.25rem;
    right: -17.5rem;
  }
  &.home-intro-bg-image--3 {
    width: 27.5rem;
    top: 19.875rem;
    left: -16.25rem;
  }
  &.home-intro-bg-image--4 {
    width: 15rem;
    bottom: 16.25rem;
    right: -12.5rem;
  }
}

.home-business-typo {
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 3.5rem;
  opacity: 20%;
  position: absolute;
  bottom: -0.2em;
  left: 50%;
  transform: translateX(-50%);
  @media (min-width: 768px) {
    font-size: 7.5rem;
  }
  @media (min-width: 1024px) {
    font-size: 10rem;
  }
  @media (min-width: 1200px) {
    font-size: 15rem;
  }
}

.insta-list {
  min-height: 18.75rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
}

.header {
  @media (min-width: 1200px) {
    & .header__logo {
      opacity: 0;
      pointer-events: none;
    }
    width: 100%;
    top: calc(clamp(50rem, calc(var(--vh) * 100), 80rem) - 15rem);
    transition: top 300ms linear;

  }
}

.bg-yellow-decs {
  position: relative;
  overflow: hidden;
  z-index: 0;
  @media (min-width: 768px) {
    &::before,
    &::after {
      content: "";
      background-size: 100% 100%;
      background-repeat: no-repeat;
      filter: blur(8px);
      position: absolute;
      z-index: -1;
    }
    &::before {
      aspect-ratio: 751 / 430;
      width: 46.9375rem;
      top: 19.6875rem;
      left: -2rem;
      background-image: url("/system_panel/uploads/images/home-insta-bg-dec-1.svg");
    }
    &::after {
      aspect-ratio: 724 / 493;
      width: 45.25rem;
      top: 11.625rem;
      right: -3.75rem;
      background-image: url("/system_panel/uploads/images/home-insta-bg-dec-2.svg");
    }
  }
}

.insta-bubble {
  position: absolute;
  z-index: 2;
  width: 20rem;
  top: -3rem;
  right: -1rem;
  @media (min-width: 1024px) {
    width: 25rem;
    top: -3rem;
    right: 1rem;
  }
  @media (min-width: 1200px) {
    width: 29rem;
    top: -5rem;
    right: 4rem;
  }
}