.categories {
    column-count: 1;
    column-width: auto;

    margin-inline: auto;
    margin-block: 0;
    padding-bottom: 25px;
    padding-left: clamp(5px, 25vw, 30%);
    padding-right: 0;
    list-style-type: none;

    h3 {
        font-size: var(--font-size-m);
        color: var(--primary-color);

        margin-block: 0;
    }

    & > li {
        margin-block-end: 25px;
        display: inline-block;
        min-width: 80%;
    }

    ul {
        list-style-type: none;

        li {
            margin-bottom: 3px;
        }
    }

    a {
        text-decoration: none;
        color: black;
    }

    a:hover {
        color: orange;
    }
}

@media screen and (min-width: 750px) {
    .categories {
        columns: 3 auto;
        padding-left: 0;

        >li {
            width: auto;
            padding-left: 40px;
        }
    }
}