.slider {
width: 100%;
gap: 30px;
margin-bottom: 20px;
}
.slider__slide {
position: relative;
z-index: 2;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: calc(60vh - 35px);
color: #fff;
padding-bottom: 35px;
border-radius: 24px;
overflow: hidden;
transition: all var(--transition05);
text-decoration: none;
}
.slider__slide::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 40%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slider__slide__bg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.slider__slide__bg img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slider__slide__picto {
position: absolute;
bottom: 25px;
left: 50%;
width: 100px;
height: 100px;
overflow: hidden;
background-color: var(--white);
border-radius: 100%;
transform: translateX(-50%);
transition: all var(--transition05);
}
.slider__slide__picto img {
height: 70%;
width: 70%;
padding: 10%;
object-fit: contain;
}
.slider__slide__title {
font-size: var(--fontSizeH4);
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
.slider__slide__text {
font-size: var(--fontSizeP2);
font-weight: 600;
}
.slider__slide__title,
.slider__slide__text {
transition: all var(--transition001);
opacity: 0;
padding: 0 40px 0 135px;
}
@media (max-width: 1440px) {
.slider__slide .slider__slide__picto {
width: 80px;
height: 80px;
}
.slider__slide__title,
.slider__slide__text {
padding: 0 20px 0 115px;
}
}
@media (min-width: 1281px) {
.slider__slide {
height: calc(70vh - 35px);
}
.slider__slide:hover,
.slider__slide:focus {
width: 300%;
}
.slider__slide:hover .slider__slide__picto,
.slider__slide:focus .slider__slide__picto {
left: 15px;
transform: translateX(0);
}
.slider__slide:hover .slider__slide__title,
.slider__slide:focus .slider__slide__title,
.slider__slide:hover .slider__slide__text,
.slider__slide:focus .slider__slide__text {
opacity: 1;
transition: all var(--transition05);
transition-delay:  var(--transition025);
}
}
@media (max-width: 1280px) {
.slider {
flex-flow: wrap;
gap: 20px;
margin-bottom: 30px;
}
.slider__slide {
border-radius: 8px;
width: calc(50% - 20px);
height: auto;
padding-bottom: 20px;
aspect-ratio: 16 / 7;
}
.slider__slide::after {
height: 60%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 75%);
}
.slider__slide .slider__slide__picto {
left: 15px;
transform: translateX(0);
width: 80px;
height: 80px;
}
.slider__slide__title,
.slider__slide__text {
opacity: 1;
padding: 0 20px 0 110px;
}
}
@media (max-width: 800px) {
.slider__slide {
width: 100%;
height: auto;
aspect-ratio: 16 / 7;
}
.slider {
width: 100%;
gap: 10px;
margin-bottom: 20px;
}
}
.slider__links {
align-self: flex-end;
gap: 10px 20px;
padding: 20px 30px 20px 20px;
background-color: #fff;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
margin-bottom: 40px;
}