:root {
--swipe-card: 86vw;
--swipe-edge: 4vw;
--swipe-gap: 3vw;
--swipe-bleed: 0px;
}
@media (max-width: 767.98px) {
[data-swipe-carousel] {
display: flex;
flex-direction: row;
align-items: start;
justify-content: flex-start;
gap: var(--swipe-gap);
margin-block: 0;
margin-inline: var(--swipe-bleed);
padding: 0 calc(100vw - var(--swipe-card) - var(--swipe-edge)) 0 var(--swipe-edge);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: var(--swipe-edge);
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
[data-swipe-carousel]::-webkit-scrollbar {
display: none;
}
[data-swipe-carousel]:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: var(--radius-sm);
}
[data-swipe-carousel] > * {
flex: 0 0 var(--swipe-card);
width: var(--swipe-card);
max-width: none;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
[data-swipe-carousel][data-swipe-tablet] {
display: flex;
flex-direction: row;
align-items: start;
justify-content: flex-start;
gap: var(--swipe-gap);
margin-block: 0;
margin-inline: var(--swipe-bleed);
padding: 0 calc(100vw - var(--swipe-card) - var(--swipe-edge)) 0 var(--swipe-edge);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: var(--swipe-edge);
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
[data-swipe-carousel][data-swipe-tablet]::-webkit-scrollbar {
display: none;
}
[data-swipe-carousel][data-swipe-tablet]:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: var(--radius-sm);
}
[data-swipe-carousel][data-swipe-tablet] > * {
flex: 0 0 var(--swipe-card);
width: var(--swipe-card);
max-width: none;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
@media (max-width: 1023.98px) {
.swipe-bar {
display: flex;
align-items: center;
margin: 0 var(--swipe-bleed) var(--space-4);
padding-inline: var(--swipe-edge);
}
.swipe-counter {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: 0.14em;
font-variant-numeric: tabular-nums;
color: var(--text-on-dark-secondary);
}
.swipe-counter__current {
color: var(--text-on-dark-primary);
}
.section--light .swipe-counter,
.references .swipe-counter,
.system-story .swipe-counter {
color: var(--text-on-light-secondary);
}
.section--light .swipe-counter__current,
.references .swipe-counter__current,
.system-story .swipe-counter__current {
color: var(--text-on-light-primary);
}
.swipe-progress {
margin-block: var(--space-5) 0;
margin-inline: calc(var(--swipe-bleed) + var(--swipe-edge));
height: 2px;
border-radius: 2px;
background: color-mix(in srgb, currentColor 16%, transparent);
overflow: hidden;
}
.swipe-progress__fill {
display: block;
height: 100%;
width: 33.3333%;
border-radius: inherit;
background: var(--color-blue-dark);
}
}