/* ABC category cards use a height of 60% of their width. */
.xxzh-box-row {
    display: contents;
}

@media (min-width: 992px) {
    .xxzh-box-row {
        display: grid;
        grid-template-columns: repeat(var(--xxzh-box-columns, 2), minmax(0, 1fr));
        gap: 10px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .xxzh-box-row > .home-cat-box {
        min-width: 0;
    }

    .xxzh-box-row > .home-cat-box > section.container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .xxzh-box-row .widget-catbox-item {
        height: auto;
        aspect-ratio: 5 / 3;
    }

    .xxzh-box-row .catbox-content {
        position: absolute;
        inset: 0;
        padding: 4px;
    }

    .xxzh-box-row .catbox-title {
        font-size: clamp(12px, 1.1vw, 16px);
        letter-spacing: 0;
    }
}

@media (max-width: 767.98px) {
    .home-widget.home-search-box {
        display: none !important;
    }

    main > .home-cat-box > section.container,
    .xxzh-box-row > .home-cat-box > section.container {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    main > .home-cat-box:first-child > section.container {
        padding-top: 20px;
    }

    main > .home-cat-box:last-child > section.container,
    .xxzh-box-row > .home-cat-box:last-child > section.container {
        padding-bottom: 20px;
    }

    .home-cat-box .widget-catbox-item {
        height: auto;
        aspect-ratio: 5 / 3;
        background-size: cover;
        background-position: center;
        border-radius: 6px;
    }

    .home-cat-box .catbox-content {
        position: absolute;
        inset: 0;
        padding: 4px;
        gap: 4px;
    }

    .home-cat-box .catbox-title {
        font-size: clamp(10px, 2.9vw, 13px);
        line-height: 1.25;
        letter-spacing: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .home-cat-box .catbox-content .badge {
        font-size: 10px;
        line-height: 1.1;
        padding: 3px 5px;
        margin-bottom: 0 !important;
    }
}