.bandeau-pictogrammes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 20px;
margin: 32px 0;
align-items: center;
overflow: hidden;
position: relative;
}
.pictogramme {
display: flex;
justify-content: center;
align-items: flex-start;
}
.pictogramme img {
width: 100%;
height: auto;
max-width: 150px;
max-height: 150px;
object-fit: contain;
}
.slider-dots {
display: none;
} @media screen and (min-width: 1281px) {
.bandeau-pictogrammes {
padding-left: calc((100vw - 1280px) / 2);
padding-right: calc((100vw - 1280px) / 2);
}
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
.bandeau-pictogrammes {
padding-left: calc((100vw - 1024px) / 2);
padding-right: calc((100vw - 1024px) / 2);
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.bandeau-pictogrammes {
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width: 1024px) {
.bandeau-pictogrammes {
display: flex;
transition: transform 0.5s ease-in-out;
overflow: hidden;
flex-direction: column;
}
.bandeau-pictogrammes-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
.pictogramme {
flex: 0 0 100%;
margin-right: 0; 
}
.slider-dots {
display: flex;
justify-content: center;
margin-top: 16px;
}
.slider-dots .dotButton {
border: none;
background-color: #FCF9F5;
border-radius: 50%;
width: 16px;
height: 16px;
margin: 0 4px;
cursor: pointer;
padding: 0;
}
.slider-dots .dotButton.active {
background-color: #174A42;
}
}