.c-hslist {
    display   : flex;
    margin    : 0 var(--n-margin-md);
    padding   : 0 var(--margin-md);
    gap       : var(--margin-md);
    overflow-x: scroll;
}

.c-hslist-item {
    display    : flex;
    width      : 85%;
    flex-shrink: 0;
}

@media (min-width: 48rem) {
    .c-hslist {
        display: grid;
        grid   : "a b";
        gap    : var(--margin-lg);
    }

    .c-hslist-item {
        width         : unset;
        border-bottom : var(--border-thin) solid var(--univ-primary);
        padding-bottom: var(--margin-md);
        margin-bottom : var(--margin-xxl);
    }
}