.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;
    flex-direction: column;
    width         : 85%;
    flex-shrink   : 0;
}

@media (min-width: 48rem) {
    .c-hslist {
        display              : grid;
        gap                  : var(--margin-lg) var(--margin-xxl);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .c-hslist-item>div,
    .c-hslist-item>p,
    .c-hslist-item>ul {
        width: 100%;
    }
}