:root {
    --content-width: 72ch;
    --page-gutter: clamp(1rem, 4vw, 3rem);
    --focus-color: currentColor;
}

* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--page-gutter);
}
h1, h2, h3 { line-height: 1.2; overflow-wrap: anywhere; }
p, li { overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
a:focus-visible, summary:focus-visible, button:focus-visible, iframe:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}
.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 1rem;
    transform: translateY(-200%);
    background: Canvas;
    color: CanvasText;
    padding: .5rem 1rem;
    z-index: 1;
}
.skip-link:focus { transform: none; }
.offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--offer-column-width, 22rem)), 1fr));
    gap: var(--offer-gap, 2rem);
}
.offer { min-width: 0; }
.external-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.breadcrumbs li { margin: 0; }