/* Keep the promise and explanation together, followed by four parallel benefits. */
.value{background:var(--blue);color:var(--white);padding-block:96px}
.value-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:64px;row-gap:64px;align-items:center;max-width:1440px;margin-inline:auto}
.value-intro h2{font-size:clamp(40px,4.5vw,70px);line-height:1.06}
.value-intro>p{max-width:48ch;margin-top:24px;font-size:19px;line-height:1.6;text-wrap:pretty}
.value-art{margin:0;min-width:0;mix-blend-mode:lighten}
.value-art img{width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
.value-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0}
.value-list>div{border-top:1px solid rgb(255 251 243 / 28%);padding-top:24px}
.value-list dt{font-size:clamp(21px,1.8vw,26px);font-weight:500;line-height:1.2;letter-spacing:-.02em;margin-bottom:12px;text-wrap:balance}
.value-list dd{margin:0;max-width:34ch;font-size:16px;line-height:1.6;color:var(--white)}
@media(max-width:1100px){
  .value-layout{column-gap:40px;row-gap:48px}
  .value-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
  .value-list dt{font-size:24px}
}
@media(max-width:850px){
  .value{padding-block:72px}
  .value-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .value-intro h2{font-size:clamp(40px,6.4vw,54px)}
  .value-intro>p{font-size:18px;margin-top:20px}
  .value-art{width:100%;max-width:680px;justify-self:center}
}
@media(max-width:550px){
  .value{padding-block:60px}
  .value-intro h2{font-size:clamp(34px,8.8vw,44px)}
  .value-intro>p{font-size:17px}
  .value-list{grid-template-columns:minmax(0,1fr);gap:24px}
  .value-list>div{padding-top:20px}
  .value-list dt{font-size:24px;margin-bottom:8px}
}