.cat-hero { display: flex; flex-direction: column; }
.cat-hero__plate { flex: 0 0 var(--plate-h); }
.cat-hero__band { flex: 0 0 auto; }

.cat-lede { background: var(--surface); padding-inline: var(--gutter); }
.cat-lede__wrap { max-width: var(--measure); margin: 0 auto; }
.cat-lede__heading { font-size: var(--f2); font-weight: 500; }
.cat-lede__text:last-child { margin-bottom: 0; }

img.cat-hero__plate {
  display: block; width: 100%;
  object-fit: cover; object-position: var(--focal);
}
img.cat-hero__plate { min-height: 0; }

@media (min-width: 72rem) {
  .cat-hero { --plate-h: min(56.25vw, calc(100svh / var(--phi))); }
}