/* CAROUSEL */
.carousel {
    align-self: center;
    width: 98%;
    overflow-x: auto;
    margin: 1em auto;
    display: flex;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-marker-group: before;
}

.carousel::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: .5em;
    margin-bottom: 30px;
}

.carousel::-webkit-scrollbar {
    display: none;
}

/* CARDS */
.card {
    scroll-snap-align: start;
    flex: 0 0 350px;
    height: 100%;
    overflow-y: auto;
    border-radius: .5em;
    margin: 0 2em;
}

/* PAGINATION */
.card::scroll-marker {
    content: '';
    height: 1em;
    width: 1em;
    background-color: var(--primary-color);
    border-radius: .5em;
}

.card::scroll-marker:target-current {
    background-color: var(--secondary-color);
    width: 2em;
}

@media(max-width: 500px) {
    .card {
        flex: 0 0 100%;
    }
}

@media (min-width: 1024px) {
    .carousel {
        width: 360px;
    }
}