.boat-carousel-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 1rem 0 2.5rem;
margin: -1rem 0 -1.5rem;
scrollbar-width: thin;
}
.boat-carousel-track::-webkit-scrollbar {
height: 6px;
}
.boat-carousel-track::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.boat-carousel-item {
flex: 0 0 100%;
max-width: 100%;
scroll-snap-align: start;
}
@media (min-width: 768px) {
.boat-carousel-item {
flex-basis: calc((100% - 1.5rem) / 2);
max-width: calc((100% - 1.5rem) / 2);
}
}
@media (min-width: 1200px) {
.boat-carousel-item {
flex-basis: calc((100% - 4.5rem) / 4);
max-width: calc((100% - 4.5rem) / 4);
}
}
.boat-carousel-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
color: var(--by-primary);
background-color: #fff;
border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
border-radius: 0.5rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.boat-carousel-arrow svg {
width: 1.5rem;
height: 1.5rem;
}
.boat-carousel-prev svg {
transform: scaleX(-1);
}
.boat-carousel-arrow:hover:not([aria-disabled="true"]) {
background-color: rgba(var(--brand-primary-rgb), 0.08);
border-color: var(--by-primary);
}
.boat-carousel-arrow[aria-disabled="true"] {
opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
.boat-carousel-track {
scroll-behavior: auto;
}
}