/* blog-duo — a responsive two-panel layout: a featured item beside a companion
   list (e.g. a lead article next to a "more articles" column). Single column on
   mobile; an asymmetric 5fr / 6fr split from 900px. CSS-only; token-only spacing;
   brand-agnostic. */
.hzo-blog-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}
@media (min-width: 900px) {
    .hzo-blog-duo {
        grid-template-columns: 5fr 6fr;
        gap: var(--space-2xl);
        align-items: start;
    }
}