.cards{
width: 100%;
} .cards.is-theme-dark{
--cards-band-bg: var(--color-noir);
--cards-card-text: var(--color-blanc);
}
.cards.is-theme-light{
--cards-band-bg: transparent;
--cards-card-text: var(--color-noir);
} .cards__container{
max-width: var(--layout-wide-size);
margin: 0 auto;
padding: 34px 30px 18px; box-sizing: border-box;
}
.cards__top{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin: 0;
} .cards__title{
margin: 0;
font-size: var(--font-size-xxl, 40px);
font-weight: 500;
line-height: 1.1;
}
.cards__btn{
flex: 0 0 auto;
margin-top: 6px;
} .cards__band{
width: 100%;
background: var(--cards-band-bg);
padding: 26px 0;
}
.cards__viewport{
width: 100%;
overflow: hidden; } .cards__track{
max-width: var(--layout-wide-size);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center; align-items: stretch;
gap: 30px;
padding: 0 30px;
box-sizing: border-box;
will-change: transform;
transform: translate3d(0,0,0);
} .cards.is-slider .cards__track{
flex-wrap: nowrap;
justify-content: flex-start;
transition: transform .35s ease;
} .cards-slide{
flex: 0 0 auto;
width: 320px;
display: flex;
} .card{
width: 100%;
display: flex;
align-items: flex-start;
gap: 16px;
background: transparent;
box-sizing: border-box;
}
.card__logo{
flex: 0 0 auto;
width: 72px;
height: 72px;
display: grid;
place-items: center;
}
.card__logo img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.card__content{
flex: 1 1 auto;
min-width: 0;
}
.card__title{
color: var(--cards-card-text);
font-size: var(--font-size-m, 18px);
font-weight: 500;
line-height: 1.2;
margin: 0 0 8px;
}
.card__text{
color: var(--cards-card-text);
font-size: var(--font-size-s, 16px);
font-weight: 400;
line-height: 1.45;
} @media (max-width: 980px){
.cards__container{
padding: 30px 20px 16px;
}
.cards__track{
padding: 0 20px;
}
.cards-slide{
width: 300px;
}
}
@media (max-width: 680px){
.cards__container{
padding: 28px 20px 14px;
}
.cards__top{
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.cards__btn{
margin-top: 0;
} .cards__track{
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 18px;
}
.cards-slide{
width: 100%;
}
.card{
gap: 14px;
margin-bottom:30px;
}
.card__logo{
width: 60px;
height: 60px;
}
}