/* Why Choose YAMI: image softens naturally into the dark information panel below. */
.why-feature {
  background: #090909;
}

.why-media {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 56vw, 720px);
  overflow: hidden;
}

.why-media > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.why-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 9, 9, 0) 22%, rgba(9, 9, 9, .03) 38%, rgba(9, 9, 9, .17) 58%, rgba(9, 9, 9, .65) 80%, #090909 100%);
}

.why-title {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 8vw, 140px);
  bottom: clamp(30px, 5vw, 70px);
  max-width: min(760px, 82vw);
}

.why-title blockquote {
  color: var(--paper);
  font-size: clamp(50px, 7vw, 108px);
  letter-spacing: -.06em;
}

.why-title blockquote em {
  color: #e8a96d;
}

.why-details {
  background: #090909;
  padding: 34px clamp(24px, 8vw, 140px) 64px;
}

.why-details > p {
  max-width: 700px;
  margin: 0;
  color: #d9d3cc;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.8;
}

.why-details .button {
  margin-top: 28px;
}

@media (max-width: 700px) {
  .why-media {
    min-height: 480px;
  }

  .why-media > img {
    object-position: 56% center;
  }

  .why-media::after {
    background: linear-gradient(180deg, rgba(9, 9, 9, 0) 15%, rgba(9, 9, 9, .08) 43%, rgba(9, 9, 9, .55) 74%, #090909 100%);
  }

  .why-title {
    left: 7vw;
    bottom: 34px;
    max-width: 86vw;
  }

  .why-title blockquote {
    font-size: clamp(45px, 12vw, 66px);
  }

  .why-details {
    padding: 30px 7vw 46px;
  }

  .why-details > p {
    font-size: 15px;
    line-height: 1.72;
  }
}