= viewport */
–sports-height: 65px;
}

.sports-banner {
background: var(–sports-bg);
color: var(–sports-text);
font: 600 .9em ‘Roboto’, sans-serif;
height: var(–sports-height);
display: none; /* shown once data loads */
margin-bottom: 20px;
}

.sports-inner {
max-width: 1200px;
margin: 0 auto;
height: 100%;
display: grid;
grid-template-columns: auto 1fr;
align-items: stretch;
gap: 12px;
}

.sports-label {
display: inline-flex;
align-items: center;
padding: 0 12px;
margin-left: 12px;
color: var(–sports-text);
border-radius: 6px;
font-weight: 800;
letter-spacing: .3px;
user-select: none;
}

.sports-track { min-width: 0; overflow: hidden; }
.swiper { height: 100%; }

/* Multiple visible; linear motion */
.sports-track .swiper-wrapper { display: flex; align-items: center; }
.sports-track .swiper-slide { width: auto !important; flex: 0 0 auto !important; max-width: none !important; min-width: 0 !important; }
.sports-track .swiper, .sports-track { width: 100%; }

/* Slide = inline-flex container; centered, with distributed extra spacing */
.sports-slide {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center; /* center horizontally */
white-space: nowrap;
text-align: center;
padding-right: calc(var(–sports-gap) + var(–sports-extra-pad));
border-radius: 4px; /* so hover bg has soft corners */
}

/* Full-slide link (ROW layout: time + title on the same line) */
.sports-slide .slide-link {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row; /* same line */
gap: 10px;
width: 100%;
height: 100%;
text-decoration: none;
color: var(–sports-text);
padding: 0 8px;
outline: none;
}

/* Hover/focus: lighter blue on the whole slide */
.sports-slide:hover,
.sports-slide:focus-within {
background: var(–sports-bg-hover);
}

/* Visual divider on the LEFT side of each slide */
.sports-slide::before {
content: “”;
position: absolute;
left: 6px;
top: 50%;
width: 1px;
height: 18px;
background: rgba(255,255,255,.25);
transform: translateY(-50%);
pointer-events: none;
display: none;
}

.sports-time { font-weight: 500; opacity: .9;}
.sports-title { font-weight: 600; }

@media (max-width: 640px) {
:root { –sports-height: 65px; –sports-gap: 20px; }
.sports-label { margin-left: 8px; padding: 0 10px; }
}
]]>

SPORTS: