.c-menu-cards {
    container-type: inline-size;
}

    .c-menu-cards ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--card-size, 13.25rem), var(--card-max-size, 16rem)));
        gap: var(--card-gap, 1.5rem);
    }

.l-region--dark:has(.c-menu-cards) {
    --card-text: var(--color-black);
    --card-text-hover: var(--color-white);
    --card-bg: var(--color-white);
    --card-bg-hover: var(--color-black);
}

@container (max-width: 43.75em) {
    .c-menu-cards ul {
        --card-label-fs: 0.875rem;
        --card-gap: 1rem;
        --card-title-leading: 1.1818;
        --card-aspectratio: 256/266;
        --card-size: 13.25rem;
        --card-max-size: 13.25rem;
    }

        .c-menu-cards ul:has(li:nth-last-child(n + 3)) {
            --card-max-size: 1fr;
        }
}

@container (min-width: 43.8125em) {
    .c-menu-cards ul:has(li:nth-last-child(n + 5)) {
        --card-size: 16rem;
        --card-max-size: 1fr;
        --card-label-fs: 0.875rem;
        --card-gap: 1rem;
        --card-title-leading: 1.1818;
        --card-aspectratio: 256/266;
        --card-size: 13.25rem;
    }

    .c-menu-cards ul:has(li:nth-last-child(n + 6)) {
        --card-aspectratio: 212/221;
    }
}

.c-menu-cards li {
    container-type: inline-size;
    margin-top: 0;
}

.c-menu-cards__link {
    --link-underline: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    min-height: 100%;
    color: var(--card-text, var(--color-white));
    background-color: var(--card-bg, var(--color-black));
    padding: var(--card-padding, 1.5rem 1.25rem);
    aspect-ratio: var(--card-aspectratio, 217/226);
    transition: background-color 0.4s ease, color 0.25s ease;
    overflow-wrap: break-word;
    hyphens: auto;
}

    .c-menu-cards__link:hover {
        background-color: var(--card-bg-hover, var(--color-white));
        color: var(--card-text-hover, var(--color-black));
    }

.c-menu-cards__title {
    /* ref: https://utopia.fyi/type/calculator/?c=212,22,1.2,256,26,1.25,0,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    font-size: var(--card-title-fs, clamp(1.375rem, 0.1705rem + 9.0909cqi, 1.625rem));
    line-height: var(--card-title-leading, 1.037);
}

.c-menu-cards__label {
    font-size: var(--card-label-fs, 1rem);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

@media (max-width: 37.4375em) {
    .c-menu-cards ul {
        --card-aspectratio: 150/156;
        --card-padding: clamp(0.625rem, 4vw, 1.25rem);
        --card-title-fs: clamp(0.875rem, 0.7241rem + 1.7241cqi, 1rem);
        --card-label-fs: clamp(0.625rem, 0.2065rem + 1.7857cqi, 0.875rem);
        --card-gap: 1rem;
        --card-title-leading: 1.15;
        grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    }

    .c-menu-cards__label {
        gap: 0.5rem;
    }

        .c-menu-cards__label svg {
            height: 1em;
        }
}

@media (min-width: 22.5em) and (max-width: 27.5em) {
    .c-menu-cards ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}