39 lines
841 B
CSS
39 lines
841 B
CSS
.carousel {
|
|
display: grid;
|
|
grid-auto-columns: 350px;
|
|
grid-auto-flow: column;
|
|
gap: var(--Spacing-x2);
|
|
margin-left: calc(0 - var(--Spacing-x2));
|
|
margin-right: calc(0 - var(--Spacing-x2));
|
|
overflow-x: scroll;
|
|
scroll-padding-left: var(--Spacing-x2);
|
|
scroll-snap-type: x mandatory;
|
|
scrollbar-width: none;
|
|
/* Hide scrollbar IE and Edge */
|
|
-ms-overflow-style: none;
|
|
/* Hide Scrollbar Firefox */
|
|
}
|
|
|
|
.carousel > * {
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
/* Hide Scrollbar Chrome, Safari and Opera */
|
|
.carousel::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* 3 cols + 2 gaps (+ padding) before falling back to scroll */
|
|
@media screen and (min-width: 964px) {
|
|
.carousel {
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1367px) {
|
|
.carousel {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|