@layer components {
    .listing-main__games {
        grid-column: 1 / -1;
        min-width: 0;

        @media (min-width: 80rem) {
            grid-column: 1 / span 3;
        }
    }

    .listing__header {
        display: grid;
        width: 100%;
        margin-bottom: var(--space-20, 1.25rem);
        padding-bottom: var(--space-20, 1.25rem);
        row-gap: var(--space-20, 1.25rem);
        border-bottom: 0.0625rem solid var(--color-border);
    }
    
    .games-archive-grid {
        display: grid;
        gap: var(--space-20);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        list-style: none;

        @media (min-width: 50rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @media (min-width: 62.5rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .games-archive-grid>.loading {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--space-80, 5rem);
    }

    .game-card {
        min-width: 0;
    }

    .game-card__link {
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: 100%;
        overflow: hidden;
        border: 0.0625rem solid var(--color-card-border);
        border-radius: 1.375rem;
        background: var(--color-card-bg);
        box-shadow: 0 0.125rem 0.5rem var(--color-black-alpha-06, var(--color-black-alpha-06));
        color: var(--color-heading);
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .game-card__media {
        position: relative;
        display: grid;
        align-items: center;
        min-width: 0;
        width: 100%;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        background-color: var(--color-media-placeholder-bg);
        line-height: 0;
        isolation: isolate;
    }

    .game-card__image {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        background-color: transparent;
        color: transparent;
        font-size: 0;
    }

    .game-card__link:hover,
    .game-card__link:focus-visible {
        box-shadow: 0 0.5rem 1.5rem var(--color-black-alpha-12);
        transform: translateY(-0.125rem);
    }

    .game-card__review-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: var(--space-8);
        padding: var(--space-16);
        background: var(--color-bg-overlay-image);
        color: var(--color-white);
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .game-card__link:hover .game-card__review-overlay,
    .game-card__link:focus-visible .game-card__review-overlay {
        opacity: 1;
    }

    .game-card__review-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .game-card__review-stars {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        color: var(--color-brand-primary);
    }

    .game-card__review-star.svg-sprite {
        position: static;
        display: block;
        flex: 0 0 var(--space-20);
        width: var(--space-20);
        height: var(--space-20);
        fill: currentColor;
    }

    .game-card__review-star--empty {
        color: var(--color-white-alpha-78);
    }

    .game-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        min-width: 0;
        padding: var(--space-16);
        gap: var(--space-4);
    }

    .game-card__title {
        margin: 0;
        color: var(--color-text);
        font-size: var(--text-lg);
        line-height: var(--leading-tight);
    }

    .game-card__release {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-tight);
    }

    .loadmore {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-block: var(--space-8);
    }
}