/* the problem: heading left, prose and the client's words right */
.why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.why .prose{font-size:var(--fs-lg);font-weight:300;line-height:1.55;max-width:58ch}
.why .prose + .prose{margin-top:18px}
.why blockquote{margin-top:36px;padding:26px 30px;border-radius:20px;background:var(--tint);max-width:520px}
.why blockquote p{font-size:clamp(22px,1.8vw,28px);line-height:1.25}
.why blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:14px;color:var(--muted)}
@media (max-width:900px){.why{grid-template-columns:1fr;gap:24px}}

.whole{margin-top:32px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* related work: two paper cards */
.related{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
@media (max-width:900px){.related{grid-template-columns:1fr}}