56 lines
1.0 KiB
CSS
56 lines
1.0 KiB
CSS
.gridContainer {
|
|
display: grid;
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.carousel {
|
|
display: grid;
|
|
grid-auto-columns: 80dvw;
|
|
grid-auto-flow: column;
|
|
gap: var(--Spacing-x2);
|
|
margin-left: calc(0 - var(--Spacing-x2));
|
|
margin-right: calc(0 - var(--Spacing-x2));
|
|
padding-left: 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:last-child {
|
|
margin-right: var(--Spacing-x2);
|
|
}
|
|
|
|
.carousel > * {
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
/* Hide Scrollbar Chrome, Safari and Opera */
|
|
.gridContainer::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: 1367px) {
|
|
.twoColumnGrid,
|
|
.twoPlusOne {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.threeColumnGrid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.twoPlusOne > *:last-child {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.carousel {
|
|
grid-auto-flow: unset;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|