.home-hero {
  position: relative;
  height: 40rem;
  padding-bottom: 5rem;
  background-color: var(--snow);
  
  & .home-hero__title {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    line-height: 1.25;
    color: var(--snow);
    & > p {
      --tracking: 0.04em;
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 1.125rem;
    }
    & h1 {
      --tracking: 0.12em;
      font-family: var(--font-serif);
      font-weight: 600;
      font-size: 1.75rem;
    }
  }
  
  & .home-hero__logo {
    width: 10rem;
    position: absolute;
    right: 1.25rem;
    bottom: 1.5rem;
  }
  
  @media (min-width: 768px) {
    padding-right: 4rem;
    & .home-hero__title {
      top: calc(50% - 4rem);
      left: 4rem;
      gap: 0.75rem;
      & > p {
        font-size: 1.5rem;
      }
      & h1 {
        font-size: 2.5rem;
      }
    }
    & .home-hero__logo {
      width: 12.5rem;
      right: 2rem;
    }
  }
  @media (min-width: 1024px) {
    padding-right: 5rem;
    padding-bottom: 6.25rem;
    & .home-hero__title {
      gap: 1rem;
      & > p {
        font-size: 2.125rem;
      }
      & h1 {
        font-size: 3.5rem;
      }
    }
  }
  @media (min-width: 1200px) {
    height: clamp(55rem, 100dvh, 65rem);
    padding-right: 7.5rem;
    padding-bottom: 7.5rem;
    & .home-hero__title {
      top: calc(50% - 8rem);
      left: 5rem;
      gap: 1.125rem;
      & > p {
        font-size: 2.5rem;
      }
      & h1 {
        font-size: 4rem;
      }
    }
    & .home-hero__logo {
      width: 17.5rem;
      right: 3.75rem;
      bottom: 2.5rem;
    }
  }
}

.home-intro-panel {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  transform: translateX(-30%);
  width: 5rem;
  @media (min-width: 768px) {
    width: 10rem;
  }
  @media (min-width: 768px) {
    width: 15rem;
  }
  @media (min-width: 1200px) {
    width: 18.75rem;
  }
}

.home-intro-bg-dec {
  position: absolute;
  top: 0;
  left: 0;
  height: 21.25rem;
  width: 43.75rem;
  background-color: var(--logo-orange);
}

.home-area-text span {
  font-size: 1.25rem;
  @media (min-width: 768px) {
    font-size: 1.5rem;
  }
  @media (min-width: 1200px) {
    font-size: 2rem;
  }
}

.home-area-panel {
  position: absolute;
  width: 6.25rem;
  top: -3.75rem;
  left: -2rem;
  @media (min-width: 768px) {
    top: -5rem;
    width: 8rem;
  }
  @media (min-width: 1200px) {
    top: 0;
    left: 0;
    width: 12.5rem;
  }
}

.home-works-slider {
  width: 100%;
  margin-top: -6rem;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
}

.blog-list {
  position: relative;
  &::before{
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8.5rem -5rem -2.5rem;
    background-color: var(--light-gray);
  }
}