.content-page{padding-top:6em}
.content-hero{padding:7.5em 0;background:#fff}
.content-hero-grid{display:grid;grid-template-columns:minmax(20em,31.25em) minmax(0,1fr);gap:5em;align-items:center}
.content-visual{overflow:hidden;border-radius:2em;background:linear-gradient(145deg,var(--pink),var(--cream));padding:.25em}
/* height:auto is required alongside aspect-ratio here: the_post_thumbnail()
   prints width/height HTML attributes from the attachment's own size, and
   browsers treat that as a definite height that aspect-ratio won't override
   on its own -- without it, narrow viewports (where width:100% shrinks the
   image well below its native size) stretch the image tall instead of
   staying square. */
.content-visual img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:1.75em}
.content-copy .eyebrow{margin:0 0 .75em;color:var(--pink);font-size:1.125em;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.content-copy h1,.content-hero>.shell>h1{margin:0;font-family:Montserrat,Arial,sans-serif;font-size:3.5em;font-weight:800;line-height:1.08;letter-spacing:-.025em}
.content-copy .lead{max-width:36em;margin:1.25em 0 0;font-size:1.375em;font-style:italic;font-weight:500;line-height:1.45}
.content-hero>.shell>.body-copy,.content-copy .body-copy{max-width:41em;margin:1.5em 0 0;font-size:1.125em;line-height:1.6}
.content-copy .button{margin-top:2em}
.content-details{padding:6em 0 7.5em;background:var(--cream)}
.content-details h2{max-width:20em;margin:0 auto 1.5em;text-align:center;font-family:Montserrat,Arial,sans-serif;font-size:2.75em;line-height:1.15}
.content-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2em}
.content-card{border-radius:1.5em;background:#fff;padding:2em}
.content-card h3{margin:0 0 .75em;font-size:1.375em;line-height:1.25}
.content-card p{margin:0;font-size:1.0625em;line-height:1.55}
.content-card a{display:inline-flex;margin-top:1.25em;color:var(--pink);font-weight:800;text-decoration:underline;text-underline-offset:.2em}
@media(max-width:68.75em){
  .content-page{padding-top:3.75em}
  .content-hero{padding:6em 0}
  .content-hero-grid{grid-template-columns:minmax(16em,22em) minmax(0,1fr);gap:3em}
  .content-copy h1,.content-hero>.shell>h1{font-size:2.75em}
  .content-copy .lead{font-size:1.25em}
  .content-details{padding:5em 0 6em}
  .content-details h2{font-size:2.25em}
  .content-cards{grid-template-columns:1fr;gap:1.5em}
}
@media(max-width:37.4375em){
  .content-hero{padding:4.5em 0 5em}
  .content-hero-grid{display:flex;flex-direction:column;gap:2.5em;align-items:stretch}
  .content-visual{width:100%}
  .content-copy h1,.content-hero>.shell>h1{font-size:2.25em}
  .content-copy .lead{font-size:1.125em}
  .content-hero>.shell>.body-copy,.content-copy .body-copy{font-size:1em}
  .content-copy .button{width:100%}
  .content-details{padding:4.5em 0 5em}
  .content-details h2{text-align:left;font-size:2em}
  .content-card{padding:1.5em}
}