.home-hero {
  position: relative;
  overflow: hidden;
  height: clamp(50rem, calc(var(--vh, 1vh) * 100), 80rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7.5rem 2rem 7.5rem 0.625rem;
  @media (min-width: 768px) {
    padding-right: 5rem;
    padding-left: 2rem;
  }
  @media (min-width: 1024px) {
    padding-right: 7.5rem;
    padding-left: 0;
  }
  
  & .home-hero__renovation-link {
    position: absolute;
    bottom: 4rem;
    left: 1.25rem;
    background-color: var(--snow);
    display: flex;
    & > img {
      object-fit: cover;
      aspect-ratio: 1 / 1;
      width: 3.5rem;
    }
    @media (min-width: 768px) {
      & > img {
        width: 5.625rem;
      }
    }
    @media (min-width: 1024px) {
      top: 10rem;
      right: 2.5rem;
      bottom: auto;
      left: auto;
    }
    @media (min-width: 1200px) {}
  }
  
  & .home-hero__content {
    position: relative;
    padding: 1rem;
    border: 1px solid hsl(from var(--orange) h s l / 40%);
    width: 100%;
    max-width: 50rem;
    margin-right: auto;
    margin-left: auto;
    & img:first-child {
      object-fit: cover;
      aspect-ratio: 3 / 2;
      width: 100%;
    }
    & img:last-child {
      position: absolute;
      top: -8.625rem;
      right: -0.75rem;
      width: 5.75rem;
      padding: 1.25rem 1rem;
      border: 1px solid hsl(from var(--snow) h s l / 40%);
      
    }
    @media (min-width: 768px) {
      padding: 2rem;
      & img:last-child {
        width: 8rem;
        right: -2rem;
      }
    }
    @media (min-width: 1024px) {
      padding: 3rem 3.75rem 3rem 3rem;
      & img:last-child {
        width: 12.5rem;
        top: auto;
        right: -10.75rem;
        bottom: -3.625rem;
        padding: 2.5rem 2rem 2.5rem 3.75rem;
      }
    }
  }
  
  & .home-hero__links {
    position: absolute;
    bottom: 3.75rem;
    left: 3.75rem;
    display: none;
    flex-direction: column;
    gap: 1.75rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--orange);
    & h2 {
      display: flex;
      align-items: center;
      gap: 0.125rem;
      font-size: 0.875rem;
      &::before {
        content: "";
        height: 1px;
        width: 0.5rem;
        background-color: var(--orange);
      }
    }
    & a {
      color: var(--orange);
    }
    @media (min-width: 1200px) {
      display: flex;
    }
  }
  
  & .home-hero__image {
    position: absolute;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    &.home-hero__image--tl {
      width: clamp(12.5rem, 24.5%, 24.5rem);
      top: 8rem;
      left: -0.125rem;
      @media (min-width: 768px) {
        top: 8.625rem;
      }
    }
    &.home-hero__image--br {
      width: clamp(13.75rem, 21.125%, 21.125rem);
      right: -0.75rem;
      bottom: 6.875rem;
      @media (min-width: 768px) {
        right: 0.375rem;
        bottom: 8rem;
      }
      @media (min-width: 1200px) {
        bottom: 2.5rem;
      }
    }
  }
}

.home-intro-image {
  position: absolute;
  opacity: 50%;
  aspect-ratio: 3 / 2;
  &.home-intro-image--1 {
    width: clamp(10.25rem, 20.625%, 20.625rem);
    top: 4rem;
    left: -0.625rem;
    @media (min-width: 768px) {
      top: 0;
      left: 0;
      transform: translate(6.0790273556%, 14.5454545455%);
    }
  }
  &.home-intro-image--2 {
    width: clamp(8.125rem, 18%, 18rem);
    top: 7rem;
    right: -0.625rem;
    @media (min-width: 768px) {
      top: 0;
      right: 0;
      transform: translate(-34.7222222222%, 58.3333333333%);
    }
  }
  &.home-intro-image--3 {
    width: clamp(9.375rem, 20.25%, 20.25rem);
    top: 50%;
    left: -1.875rem;
    transform: translateY(calc(-50% - 1.25rem));
    @media (min-width: 768px) {
      left: 0;
      transform: translate(29.4117647059%, calc(-50% + 1rem));
    }
  }
  &.home-intro-image--4 {
    width: clamp(7.5rem, 12.75%, 12.75rem);
    top: 50%;
    right: -1.25rem;
    transform: translateY(calc(-50% - 1.25rem));
    @media (min-width: 768px) {
      right: 0;
      transform: translate(-30.959752322%, calc(-50% + 1rem));
    }
  }
  &.home-intro-image--5 {
    width: clamp(12.125rem, 23.625%, 23.625rem);
    bottom: 0;
    left: -1.75rem;
    @media (min-width: 768px) {
      left: 0;
      transform: translateX(-4.5092838196%);
    }
  }
  &.home-intro-image--6 {
    width: clamp(9rem, 23.75%, 23.75rem);
    bottom: 3.75rem;
    right: -0.25rem;
    @media (min-width: 768px) {
      bottom: 0;
      right: 0;
      transform: translate(-12.1052631579%, -7.0866141732%);
    }
  }
}

.swiper:not(.swiper-initialized) {
  &.home-concept-slider {
    & .swiper-wrapper {
      display: flex;
      overflow: auto;
      & .swiper-slide {
        min-width: 33%;
      }
    }
  }
}

.home-concept-slider {
  padding-top: 3rem;
  overflow: visible;
  @media (min-width: 768px) {
    padding-top: 5rem;
  }
}

.home-blog-title {
  position: relative;
  transform: skew(-12deg);
  line-height: 1.35;
  letter-spacing: -0.04em;
  font-weight: 500;
  font-size: 1.375rem;
  align-self: center;
  &::before {
    content: "BEYOND THE BLUEPRINT";
    position: absolute;
    top: 1.125rem;
    right: -0.5rem;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 400;
    font-family: var(--font-blog);
    font-size: 0.625rem;
    color: var(--orange);
  }
  @media (min-width: 768px) {
    font-size: 3rem;
    &::before {
      top: 2.5rem;
      right: -0.5rem;
      font-size: 1.25rem;
    }
  }
  @media (min-width: 1024px) {
    font-size: 3.5rem;
    &::before {
      right: -0.75rem;
      font-size: 1.5rem;
    }
  }
  @media (min-width: 1200px) {
    font-size: 4rem;
    &::before {
      right: -2rem;
      font-size: 1.75rem;
    }
  }
}

.home-blog-text {
  transform: skew(-12deg);
}