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>