.item-listing {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(auto-fill, minmax(1fr, 1fr));
    gap: var(--font-sm);
    padding: 1rem 0;

    .item-listing-item {
        align-self: stretch;
        --bg-color: var(--ncs-cc-container-weak);
        --border-color: var(--ncs-cc-primary);
        --text-color: var(--ncs-cc-on-primary);
        --text-bg-color: var(--ncs-cc-primary);
        border-radius: calc(var(--border-radius) * 0.5);
        border: 1.5px solid var(--border-color);
        background-color: var(--bg-color);
        color: var(--text-color);
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding: var(--font-sm) var(--font-lg);
        gap: var(--font-sm);

        .item-listing-logo {
            margin: 0;
            height: auto;
            min-height: 0px;
            min-width: 0px;
            object-fit: contain;
            object-position: center;
            border-radius: inherit;
            flex: 1;
        }

        .item-listing-name-container
        {
            display: flex;
            justify-content: center;
            align-items: bottom;

            .item-listing-name {
                padding: 0.5em 1em;
                border-radius: 1000px;
                font-size: var(--font-sm);
                line-height: var(--font-sm);
                font-weight: 500;
                text-align: center;
                background-color: var(--text-bg-color);
                color: var(--text-color);
            }
        }
    }

    /* Light mode - isDark=false (default) */
    .item-listing-item[data-is-dark="false"] {
        --bg-color: var(--ncs-cc-container-weak);
        --border-color: var(--ncs-cc-primary);
        --text-color: var(--ncs-cc-on-primary);
        --text-bg-color: var(--ncs-cc-primary);
    }

    /* Light mode - isDark=true */
    .item-listing-item[data-is-dark="true"] {
        --bg-color: var(--ncs-cc-primary);
        --border-color: var(--ncs-cc-container-weak);
        --text-color: var(--ncs-cc-primary);
        --text-bg-color: var(--ncs-cc-container-weak);
    }

    /* Dark mode - isDark=true (reversed) */
    .dark-mode & .item-listing-item[data-is-dark="true"] {
        --bg-color: var(--ncs-cc-container-weak);
        --border-color: var(--ncs-cc-primary);
        --text-color: var(--ncs-cc-on-primary);
        --text-bg-color: var(--ncs-cc-primary);
    }

    /* Dark mode - isDark=false (reversed) */
    .dark-mode & .item-listing-item[data-is-dark="false"] {
        --bg-color: var(--ncs-cc-primary);
        --border-color: var(--ncs-cc-container-strong);
        --text-color: var(--ncs-cc-primary);
        --text-bg-color: var(--ncs-cc-container-strong);
    }

    /* Container queries for responsive columns */
    @container (max-width: 711px) {
        .item-listing-item
        {

            gap: 8px;
            padding: 8px;

            .item-listing-name-container
            {
                .item-listing-name
                {
                    font-size: var(--font-xs);
                }
            }
        }
    }

    @container (max-width: 555px) {
        grid-template-columns: repeat(4, 1fr);
    }

    @container (max-width: 444px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @container (max-width: 333px) {
        grid-template-columns: repeat(2, 1fr);
    }
}