/* Keep fixed-height breakpoints inside the actual column in LTR and RTL. */
.hero-carousel .hero-photo-wrap{background:var(--sage);inline-size:100%;aspect-ratio:960/641}
.hero-carousel .hero-photo-wrap>img{display:block}
.hero-carousel-caption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:5px 18px;min-height:42px}
.hero-carousel-caption>a{font-family:var(--serif);font-size:clamp(17px,2vw,22px);line-height:1.4;color:var(--ink);font-weight:550;text-decoration:none}
.hero-carousel-caption>a:hover,.hero-carousel-caption>a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.hero-carousel-caption [data-hero-credit]{font-size:11px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.hero-carousel-caption [data-hero-credit] a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hero-carousel-controls{display:flex;justify-content:flex-end;gap:8px;margin-block-start:2px}
.hero-carousel-controls button{min-width:44px;min-height:44px;padding:7px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:600 13px/1.2 var(--sans);cursor:pointer}
.hero-carousel-controls button:hover{background:var(--ink);color:var(--paper)}
.hero-carousel-controls button:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.hero-carousel-controls [data-hero-pause]{min-width:90px}
.hero-carousel-controls [aria-pressed="true"]{background:var(--sage)}
@media(max-width:600px){.hero-carousel-caption{display:block}.hero-carousel-caption [data-hero-credit]{display:block;margin-block-start:5px}.hero-carousel-controls{justify-content:flex-start}.hero-carousel .hero-photo-wrap{aspect-ratio:960/641}}
.hero-carousel:not([data-hero-ready="true"]) .hero-carousel-controls{display:none}