scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Adjust carousel card gap

Browse Source
This commit is contained in:
Chuma McPhoy
2025-02-14 13:19:06 +01:00
committed by Christian Andolf
parent 2d5111fed3
commit 7c519979bb
2 changed files with 3 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/Blocks/CarouselCards/carouselCards.module.css
View File

@@ -1,35 +1,3 @@
/*
Mock styles for the carousel cards. Will be removed/replaced
when the carousel functionality is implemented (SW-1542).
*/
.cardsContainer {
display: grid;
gap: var(--Spacing-x3);
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
.cardsContainer > * {
scroll-snap-align: start;
}
/* Show 2 cards on tablet */
@media (min-width: 768px) {
.cardsContainer {
grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
}
}
/* Show 3 cards on desktop */
@media (min-width: 1024px) {
.cardsContainer {
grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
}
}
.navigationButton {
top: 30%;
}