body {
  background-image: var(--noise-snow);
  font-family: var(--font-serif);
  letter-spacing: 0;
}

.inspection-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 37.5rem;
  @media (min-width: 768px) {
    height: 50rem;
  }
  @media (min-width: 1024px) {
    height: 60rem;
  }
  @media (min-width: 1200px) {
    height: clamp(56.25rem, calc(var(--vh, 1vh) * 100), 80rem);
  }
  
  & .inspection-hero__sliders {
    position: absolute;
    inset: 0;
    display: grid;
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--noise-black), linear-gradient(180deg, rgba(55, 55, 55, 0.00) 0%, #373737 100%);
      z-index: 2;
      pointer-events: none;
    }
    & .swiper {
      width: 100%;
      & .swiper-wrapper {
        width: 100%;
        height: 100%;
        & .swiper-slide {
          width: 100%;
          height: 100%;
          & img {
            object-fit: cover;
            width: 100%;
            height: 100%;            
          }
        }
      }
    }
  }
  
  & .inspection-hero__typo {
    line-height: 0.85;
    letter-spacing: 0.04em;
    text-shadow: var(--elevation-1);
    font-size: 3rem;
    @media (min-width: 768px) {
      font-size: 5rem;
    }
    @media (min-width: 1024px) {
      font-size: 6rem;
    }
    @media (min-width: 1200px) {
      font-size: 7.5rem;
    }
  }
}

.inspection-intro {
  background: var(--noise-black), var(--ink);
}


.inspection-intro__typo {
  opacity: 15%;
  line-height: 1;
  letter-spacing: 0;
  position: absolute;
  top: -0.5em;
  left: 50%;
  transform: translateX(-50%);
  color: var(--snow);
  font-size: 4rem;
  @media (min-width: 768px) {
    font-size: 9rem;
  }
  @media (min-width: 1024px) {
    font-size: 12rem;
  }
  @media (min-width: 1200px) {
    font-size: 15rem;
  }
}

.inspect-services-typo {
  position: absolute;
  top: -2.5rem;
  left: -0.625rem;
  line-height: 1;
  letter-spacing: 0;
  font-size: 5rem;
  color: var(--snow);
  @media (min-width: 768px) {
    left: -2.5rem;
  }
  @media (min-width: 1024px) {
    top: -3rem;
    left: -3rem;
    font-size: 6rem;
  }
  @media (min-width: 1200px) {
    top: -5rem;
    left: -5rem;
    font-size: 7.5rem;
  }
}

.button {
  border-radius: 0;
  letter-spacing: 0.04em;
  background-color: var(--ink);
}

.header .header__logo {
  width: 5rem;
  @media (min-width: 1200px) {
    width: 7.5rem;
  }
}

.loading-spinner {
  background: var(--ink);
}

.inspection-strength-card-bg-image {
  position: absolute;
  inset: 0;
  opacity: 20%;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-black);
    pointer-events: none;
  }
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.inspection-strength-card-typo {
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--snow);
  font-size: 4rem;
  position: absolute;
  top: -0.1em;
  left: 0;
  opacity: 20%;
  @media (min-width: 768px) {
    font-size: 5rem;
  }
  @media (min-width: 1024px) {
    font-size: 4.5rem;
  }
  @media (min-width: 1200px) {
    font-size: 6.25rem;
  }
}