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

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

.category_block {
    background-color: #ececec;
}

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

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

a[class*="homepage-banner-topcategories-"] {
    position: relative;
}

/* === 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;
}

.category_callout.callout-overlay {
    position: absolute;
    left: 0;
    bottom: 0;

    padding-bottom: 10px;
}

@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);
    }

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