.topic{padding-block:clamp(28px,5vw,76px);color:#142d27}
.topic-crumb{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.9rem;margin:0 0 1.6rem}
.topic-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,6vw,92px);align-items:center;padding:clamp(22px,4vw,64px);border-radius:20px;background:#142d27;color:#f4f8ec}
.topic-hero h1{font-size:clamp(2rem,5vw,4.4rem);letter-spacing:-.045em;line-height:1.06;margin:.35em 0;overflow-wrap:break-word}
.topic-hero .eyebrow{color:#b8f278}
.topic-lead{font-size:clamp(1rem,2vw,1.3rem);max-width:46ch;margin:0}
.topic-picture{margin:0;min-width:0}
.topic-picture img{display:block;width:100%;height:clamp(180px,29vw,380px);object-fit:contain;object-position:center;border-radius:9px}
.topic-picture figcaption{font-size:.8rem;margin:.8rem 0 0;text-align:center;color:#e0eee6}
.topic-content{margin-top:clamp(28px,5vw,60px);max-width:75ch}
.topic-content h2{font-size:clamp(1.35rem,3vw,2rem);margin:1.3em 0 .45em}
.topic-content p{max-width:68ch}
.topic-content .resource-list a{overflow-wrap:anywhere}
.topic-content .order{margin-bottom:2rem}
.topic-content .steps{grid-template-columns:1fr}
@media(max-width:720px){.topic-hero{grid-template-columns:1fr}.topic-picture img{height:auto;max-height:350px}}