.concept-why {
  box-sizing: border-box;
  min-height: 100svh;
  padding: 0;
  color: var(--concept-ink);
}

.concept-why__stage {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  gap: 44px;
  width: min(1180px, calc(100% - 112px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 126px 0 72px;
}

.concept-why__eyebrow {
  margin: 0 0 16px;
}

.concept-why h2 {
  margin: 0;
  max-width: 900px;
  font: 500 clamp(38px, 3.5vw, 52px)/1.12 var(--concept-display);
  letter-spacing: -0.035em;
}

.concept-why__grid {
  --why-photo-width: 320px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
  row-gap: 0;
}

.concept-why__item {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  width: min(100%, var(--why-photo-width));
  min-width: 0;
  margin: 0;
}

.concept-why__step {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 18, 24, 0.24);
  font-size: 15px;
  font-weight: 500;
  color: #414653;
}

.concept-why__step span:first-child {
  color: #454bb4;
  font-variant-numeric: tabular-nums;
}

/* Keep the original photographs and their colors. Only the perimeter fades. */
.concept-why__photo {
  height: 267.5px;
  width: 100%;
  margin: 20px 0 14px;
  border-radius: 14px 10px 13px 9px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 3%, #000 98%, transparent),
    linear-gradient(transparent, #000 2.5%, #000 96%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 3%, #000 98%, transparent),
    linear-gradient(transparent, #000 2.5%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.concept-why__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.concept-why figcaption {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  width: calc(100% - 16px);
  margin-left: 8px;
}

.concept-why figcaption strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.concept-why figcaption p {
  margin: 6px 0 0;
  color: #4d5360;
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 1000px) {
  .concept-why__stage {
    width: calc(100% - 96px);
  }

  .concept-why__grid {
    column-gap: 28px;
  }

  .concept-why__photo {
    height: auto;
    aspect-ratio: 6 / 5;
  }

}

@media (min-width: 851px) and (max-height: 800px) {
  .concept-why__stage {
    gap: 30px;
    padding: 106px 0 40px;
  }

  .concept-why h2 {
    font-size: 40px;
  }

  .concept-why__grid {
    --why-photo-width: 280px;
  }

  .concept-why__photo {
    height: 212.5px;
    margin-top: 16px;
    margin-bottom: 14px;
  }

}

@media (max-width: 850px) {
  .concept-why__stage {
    width: min(460px, calc(100% - 72px));
    padding: 108px 0 64px;
    gap: 36px;
  }

  .concept-why h2 {
    font-size: clamp(29px, 7.7vw, 36px);
    line-height: 1.16;
  }

  .concept-why__eyebrow {
    margin-bottom: 14px;
  }

  .concept-why__grid {
    --why-photo-width: 300px;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .concept-why__item,
  .concept-why figcaption {
    display: block;
    grid-row: auto;
  }

  .concept-why__item .concept-why__photo {
    height: 237.5px;
    aspect-ratio: auto;
    margin: 18px 0 14px;
  }

}