.scroll-container {
    background: var(--color-primary);
    color: #eee;
    padding: 0 5% 5%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    white-space:nowrap;
    scrollbar-width: none;
}

.scroll-container .card {
    display:inline-block;
    padding: 1em 1.5em;
    margin:0 0.5em;
    border: 1px solid var(--color-light-primary);
    width: clamp(10em, 22em, 95%);
    border-radius: 1em;
    background: var(--color-dark-primary);
    scroll-snap-align: center; /* Aligns the card to the start of the scroll container */
}

.scroll-container .card.active {
    border: 1px solid #fff;
}

.scroll-container .card .circles {
    font-size: 0.4em;
}

.scroll-container .card h2 {
    margin: 0;
    font-size: 20px;
}

.scroll-container .card h5 {
    color: var(--color-light-primary);
    margin: 0;
    font-size: 0.8em;
}

@media screen and (min-width: 768px) {
    .scroll-container{
        padding: 0 1% 3%;
        /* border-radius:0 0 0 0.2em; */
    }
    .scroll-container .card{
        width: clamp(10em, 21em, 95%);
        font-size:0.9em;
    }
}