@layer components {
    .wall-of-games {
        --wall-frame-brass: rgb(180 138 70);
        --wall-frame-highlight: rgb(236 198 120);
        --wall-frame-shadow: rgb(92 67 36);
        --wall-panel: rgb(247 248 250);
        --wall-panel-dark: rgb(17 24 39);
        display: grid;
        grid-column: 1 / -1;
        gap: var(--space-20);
        min-width: 0;
        padding-block: var(--space-24) var(--space-64);
    }

    .wall-of-games__header {
        display: grid;
        gap: var(--space-8);
        margin-bottom: 0;
        padding-bottom: var(--space-16);
        border-bottom: var(--border-width-hairline) solid var(--color-border);
    }

    .wall-of-games__eyebrow {
        width: fit-content;
        padding: var(--space-4) var(--space-10);
        border: var(--border-width-hairline) solid color-mix(in oklch, var(--wall-frame-brass) 62%, var(--color-border));
        border-radius: var(--radius-round);
        background: color-mix(in oklch, var(--color-brand-primary) 20%, var(--color-bg-surface));
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
    }

    .wall-of-games__header h1 {
        max-width: 52rem;
        color: var(--color-text);
        font-size: 3rem;
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-tight);
    }

    .wall-of-games__header h2 {
        max-width: 44rem;
        color: var(--color-text);
        font-size: var(--text-xl);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-tight);
    }

    .wall-of-games__header p:not(.wall-of-games__eyebrow) {
        color: var(--color-text-muted);
        line-height: var(--leading-normal);
    }

    .wall-of-games__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-20);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .wall-of-games__item {
        min-width: 0;
    }

    .wall-of-games-card {
        display: grid;
        grid-template-rows: auto minmax(6.75rem, auto);
        gap: var(--space-12);
        height: 100%;
        min-width: 0;
        padding: var(--space-10);
        border: var(--border-width-hairline) solid color-mix(in oklch, var(--color-border) 78%, transparent);
        border-radius: var(--space-8);
        background:
            linear-gradient(180deg, color-mix(in oklch, var(--wall-panel) 94%, var(--color-bg-surface)), var(--color-bg-surface) 58%),
            var(--color-bg-surface);
        box-shadow: 0 .75rem 1.75rem color-mix(in oklch, var(--color-black) 9%, transparent);
    }

    .wall-of-games-card__art-link {
        display: block;
        min-width: 0;
        color: inherit;
    }

    .wall-of-games-card__art-link:hover,
    .wall-of-games-card__art-link:focus-visible {
        color: inherit;
    }

    .wall-of-games-card__frame {
        position: relative;
        display: block;
        padding: var(--space-12);
        overflow: hidden;
        border-radius: var(--space-8);
        background:
            linear-gradient(135deg, var(--wall-frame-highlight), var(--wall-frame-brass) 28%, var(--wall-frame-shadow) 54%, var(--wall-frame-highlight) 76%, var(--wall-frame-brass)),
            var(--wall-frame-brass);
        box-shadow:
            inset 0 0 0 var(--border-width-hairline) rgb(255 255 255 / 48%),
            inset 0 0 0 .45rem rgb(54 39 25 / 26%),
            0 .5rem 1rem color-mix(in oklch, var(--color-black) 18%, transparent);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .wall-of-games-card__frame:hover,
    .wall-of-games-card__frame:focus-within {
        box-shadow:
            inset 0 0 0 var(--border-width-hairline) rgb(255 255 255 / 58%),
            inset 0 0 0 .45rem rgb(54 39 25 / 22%),
            0 .75rem 1.35rem color-mix(in oklch, var(--color-black) 22%, transparent);
        transform: translateY(-.125rem);
    }

    .wall-of-games-card__mat {
        display: block;
        padding: var(--space-12);
        border: var(--border-width-hairline) solid rgb(255 255 255 / 14%);
        border-radius: var(--space-4);
        background: var(--wall-panel-dark);
        aspect-ratio: 1 / 1;
    }

    .wall-of-games-card__image {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        border-radius: var(--space-4);
        object-fit: cover;
        background: var(--color-media-placeholder-bg);
        box-shadow: 0 .35rem .8rem rgb(0 0 0 / 32%);
    }

    .wall-of-games-card__award-link {
        position: absolute;
        left: var(--space-20);
        bottom: var(--space-20);
        z-index: 5;
        display: grid;
        place-items: center;
        width: 2.65rem;
        height: 2.65rem;
        border: var(--border-width-hairline) solid rgb(255 255 255 / 42%);
        border-radius: var(--radius-round);
        background: color-mix(in oklch, var(--color-black) 72%, transparent);
        color: var(--wall-frame-highlight);
        box-shadow: 0 .45rem 1rem rgb(0 0 0 / 36%);
        backdrop-filter: var(--site-background-blur);
        -webkit-backdrop-filter: var(--site-background-blur);
        transition: background-color .18s ease, color .18s ease, transform .18s ease;
    }

    .wall-of-games-card__award-link:hover,
    .wall-of-games-card__award-link:focus-visible {
        background: color-mix(in oklch, var(--wall-frame-brass) 86%, var(--color-black));
        color: var(--color-white);
        transform: translateY(-.0625rem) scale(1.04);
    }

    .wall-of-games-card__award-icon {
        position: static;
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        overflow: visible;
        fill: currentColor;
    }

    .wall-of-games-card__plaque {
        display: grid;
        align-content: center;
        justify-items: center;
        gap: var(--space-8);
        min-width: 0;
        min-height: 6.75rem;
        padding: var(--space-16) var(--space-20);
        border: var(--border-width-hairline) solid color-mix(in oklch, var(--wall-frame-shadow) 66%, var(--color-border));
        border-radius: var(--space-6);
        background:
            linear-gradient(110deg, rgb(168 121 49), rgb(236 196 101) 34%, rgb(205 154 62) 68%, rgb(147 103 42));
        box-shadow:
            inset 0 .0625rem 0 rgb(255 255 255 / 34%),
            inset 0 -.0625rem 0 rgb(63 42 17 / 26%),
            0 .35rem .7rem rgb(0 0 0 / 12%);
        color: rgb(38 28 17);
        text-align: center;
    }

    .wall-of-games-card__year {
        color: currentColor;
        font-size: var(--text-lg);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
        text-shadow: 0 .0625rem 0 rgb(255 255 255 / 26%);
    }

    .wall-of-games-card__title {
        overflow-wrap: anywhere;
        color: currentColor;
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-tight);
        text-shadow: 0 .0625rem 0 rgb(255 255 255 / 22%);
    }

    .wall-of-games-card__release {
        color: rgb(54 39 25 / 78%);
        font-size: var(--text-sm);
        line-height: var(--leading-tight);
    }

    .wall-of-games__empty {
        display: grid;
        place-items: center;
        gap: var(--space-12);
        min-height: 18rem;
        padding: var(--space-32);
        border: var(--border-width-hairline) dashed color-mix(in oklch, var(--wall-frame-brass) 52%, var(--color-border));
        border-radius: var(--space-8);
        background: var(--color-bg-surface);
        color: var(--color-text-muted);
        text-align: center;
    }

    .wall-of-games__empty-icon {
        position: static;
        display: block;
        width: var(--space-32);
        height: var(--space-32);
        fill: var(--wall-frame-brass);
    }

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

    @media (min-width: 70rem) {
        .wall-of-games__header h1 {
            font-size: 4rem;
        }

        .wall-of-games__grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (min-width: 75rem) {
        .wall-of-games {
            grid-column: 1 / span 3;
        }

        .wall-of-games__grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: var(--space-16);
        }
    }

    @media (max-width: 42rem) {
        .wall-of-games {
            gap: var(--space-20);
            padding-block: var(--space-24) var(--space-48);
        }

        .wall-of-games__header h1 {
            font-size: 2.5rem;
        }

        .wall-of-games__header p:not(.wall-of-games__eyebrow) {
            font-size: var(--text-base);
        }

        .wall-of-games__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-12);
        }

        .wall-of-games-card {
            grid-template-rows: auto auto;
            gap: var(--space-10);
            padding: var(--space-8);
        }

        .wall-of-games-card__frame {
            padding: var(--space-8);
        }

        .wall-of-games-card__mat {
            padding: var(--space-8);
        }

        .wall-of-games-card__award-link {
            left: var(--space-14);
            bottom: var(--space-14);
            width: 2.25rem;
            height: 2.25rem;
        }

        .wall-of-games-card__plaque {
            min-height: 6rem;
            padding: var(--space-12);
        }

        .wall-of-games-card__year {
            font-size: var(--text-base);
        }

        .wall-of-games-card__title,
        .wall-of-games-card__release {
            font-size: var(--text-sm);
        }
    }
}