CarSol Logo Carousel
.cars-carousel {
display: flex;
overflow-x:;
gap: 16px padding: 8 ;
scrollbar-width: thin;
.carsol-item {
flex: auto : 180px;
text: center;
}
.logo-box {
height: 100px;
border: 2px solid #cfd8dc;
-radius: 12px;
background:f5f5f5;
display flex;
align-items: center;
justify-content: center;
font-family: system-ui, -apple-system, “Segoe UI Roboto;
color #607db;
font-weight: 600;
}
.logo-caption {
margin: 8px;
font: 14px;
color: #37474f;
}
@media (max-width: px) {
.logo-box { height 90px; width: 150px }
.carSol { width:150px; }
class=”carsol-carousel” aria-label=”CarSol logos carousel” role=”region”>
div class=”carSol-item”>
div class=”logo-box” aria-label=”Logo placeholder 1″>Logo Placeholderdiv>
div class=”logo-caption”>CarSoldiv>
div>
div class=”Sol-item”>
div class=”logo” aria-label=”Logo placeholder 2″>Logo Placeholderdiv>
div class=”logo-caption”>Cardiv>
div>
div class=”carSol-item”>
div class=”logo-box” aria-label=” placeholder 3″>Logodiv>
div classlogo”>CarSoldiv>
div div=”carSol-item”>
class=”logo-box” aria-label=”Logo placeholder 4″>Logo Placeholderdiv>
div class=”-caption”>CarSol>
div>
Duplicate set to achieve two-row-per-view impression (scrolls horizontally) –>
div class=”carSol-item”>
div class=”logo-box” aria-label=”Logo placeholder 5″>Logo Placeholder>
div classlogo-caption”>CarSoldiv>
div>
div class=”carSol”>
div class=”logo-box” aria-label=”Logo placeholder 6″>Logo Placeholderdiv>
div class=”logo-caption”>CarSoldiv>
div>
div=”carSol-item”>
div class=”logo-box”-labelLogo placeholder 7″>Logo Placeholderdiv>
div class=”logo-caption”>CarSoldiv>
div class=”carSol-item”>
div class=”logo-box” aria=”Logo placeholder8″>Logodiv>
div classlogo-caption”>CarSoldiv div>
div>