:root {
    --image-gap: 3px;
}

.category_container {
    display: flex;
    flex-flow: row wrap;
    gap: var(--image-gap);
    margin: 20px 0;
}


.category_container {
    display: flex;
    flex-flow: row wrap;
    gap: var(--image-gap);
    margin: 20px 0;
}

.category_block {
    background-color: #ececec;
}

.category_container.four-grid .category_block {
    width: calc(100% / 4 - var(--image-gap));
}

.category_container.six-grid .category_block {
    width: calc(100% / 6 - var(--image-gap));
}

/* === HIDE ITEMS BEYOND GRID SIZE === */
.category_container.four-grid .category_block:nth-child(n + 5) {
    display: none;
}

.category_container.six-grid .category_block:nth-child(n + 7) {
    display: none;
}

.category_callout {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    padding-bottom: 20px;
}

@media (max-width: 1024px) {
    .category_container {
        gap: var(--image-gap);
    }

    .category_container.six-grid {
        margin: 20px;
    }

    .category_container.six-grid .category_block {
        width: calc(100% / (6 / 2) - var(--image-gap));
    }
}

@media (max-width: 767px) {

    .category_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--image-gap);
        margin: 20px 0;
    }

    .category_container.four-grid .category_block,
    .category_container.six-grid .category_block {
        width: 100%;
    }
}