.banner-section { padding-block: 0 var(--space-2); }
.banner-controls { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.banner-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-card); }
.banner-track::-webkit-scrollbar { display: none; }
.category-banner { position: relative; flex: 0 0 38%; aspect-ratio: 2 / 1; min-width: 0; overflow: hidden; border-radius: var(--radius-card); scroll-snap-align: start; text-decoration: none; isolation: isolate; }
.category-banner:first-child { flex-basis: 48%; }
.category-banner--hr { color: var(--color-ink); background: var(--banner-hr); }
.category-banner--marketing { color: var(--color-white); background: var(--banner-marketing); }
.category-banner--automation { color: var(--color-ink); background: var(--banner-automation); }
.category-banner--cybersecurity { color: var(--color-white); background: var(--banner-cybersecurity); }
.category-banner--design { color: var(--color-ink); background: var(--banner-design); }
.category-banner--analytics { color: var(--color-ink); background: var(--banner-analytics); }
.category-banner--vibecoding { color: var(--color-ink); background: var(--banner-vibecoding); }
.category-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.category-banner-content { display: flex; flex-direction: column; height: 100%; padding: var(--space-5); }
.banner-kicker { font-size: var(--font-sm); line-height: 1.4; max-width: 55%; }
.category-banner h3 { margin: var(--space-3) 0; font-size: clamp(var(--font-xl),2.5vw,var(--font-4xl)); line-height: 1.05; letter-spacing: -.045em; font-weight: 650; max-width: 58%; }
.banner-link-label { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; font-size: var(--font-sm); }
.banner-link-label svg { width: var(--font-md); height: var(--font-md); }
.category-banner:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
@media (max-width:1050px) { .category-banner, .category-banner:first-child { flex-basis: 65%; } .category-banner h3 { font-size: var(--font-3xl); } }
@media (max-width:680px) { .category-banner, .category-banner:first-child { flex-basis: 90%; } .category-banner-content { padding: var(--space-4); } .category-banner h3 { font-size: var(--font-2xl); } .banner-kicker { font-size: var(--font-xs); } .banner-link-label { font-size: var(--font-caption); } }