@layer components {
    .dossiers-page {
        display: grid;
        gap: var(--space-24);
    }

    .dossier-intro {
        display: grid;
        gap: var(--space-20, 1.25rem);
        align-items: start;

        @media (min-width: 1024px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .dossier-intro--with-game {
        @media (min-width: 1024px) {
            grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 18.75rem);
            gap: var(--space-20, 1.25rem);
            align-items: center;
        }
    }

    .dossiers-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-24);

        @media (min-width: 768px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .dossier-card,
    .dossier-card__link {
        position: relative;
        min-width: 0;
        overflow: hidden;
        border-radius: var(--radius-corner);
        background: var(--color-media-placeholder-bg);
    }

    .dossier-card__link {
        display: block;
        min-height: 16rem;
        color: var(--color-white);
        box-shadow: 0 0.125rem 0.5rem var(--color-black-alpha-06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

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

    .dossier-card__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dossier-card__image {
        position: absolute;
        inset: 0;
    }

    .dossier-card__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.72) 100%);
        pointer-events: none;
    }

    .dossier-card__label {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--space-32);
        padding: var(--space-8) var(--space-16);
        border-radius: var(--radius-corner);
        background: var(--color-content-dossier, #0f766e);
        color: var(--color-white);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold, 800);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .dossier-card__label {
        top: var(--space-16);
        right: var(--space-16);
    }

    .dossier-card__content {
        position: absolute;
        right: var(--space-20);
        bottom: var(--space-20);
        left: var(--space-20);
        z-index: 2;
        display: grid;
        gap: var(--space-8);
    }

    .dossier-card__title {
        color: var(--color-white);
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-extrabold, 800);
        line-height: var(--leading-title);
    }

    .dossier-card__text {
        display: -webkit-box;
        overflow: hidden;
        color: var(--color-text-on-image);
        font-size: var(--text-sm);
        line-height: var(--leading-reading);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .dossier-folder {
        --dossier-folder-paper: color-mix(in oklch, var(--color-primary, #ffd400) 18%, var(--color-bg-surface, #fff));
        --dossier-folder-edge: color-mix(in oklch, var(--color-primary, #ffd400) 40%, var(--color-border, #ddd));
        position: relative;
        display: grid;
        align-self: start;
        isolation: isolate;
        min-width: 0;
        padding-block-start: 2.65rem;
    }

    .dossier-folder::after {
        content: "";
        position: absolute;
        inset: 3.1rem 0.75rem -0.55rem 0.75rem;
        z-index: 0;
        border-radius: var(--radius-corner);
        background: color-mix(in oklch, var(--color-primary, #ffd400) 9%, var(--color-bg-surface, #fff));
        box-shadow: 0 1rem 2.5rem var(--color-black-alpha-08, rgb(0 0 0 / 8%));
        pointer-events: none;
    }

    .dossier-folder__tab {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: var(--space-20);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        min-width: min(13.75rem, calc(100% - var(--space-40)));
        min-height: 2.65rem;
        padding: 0.5rem 3rem 0.5rem 1rem;
        clip-path: polygon(0 0, calc(100% - 1.05rem) 0, 100% 100%, 0 100%);
        border-radius: var(--radius-corner) var(--radius-corner) 0 0;
        background: var(--color-primary, #ffd400);
        color: var(--color-black, #000);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold, 800);
        letter-spacing: 0;
        line-height: var(--leading-none);
        text-transform: uppercase;
        box-shadow: 0 0.25rem 0.75rem var(--color-black-alpha-08, rgb(0 0 0 / 8%));
    }

    .dossier-folder__body {
        position: relative;
        z-index: 1;
        min-height: 20rem;
        overflow: hidden;
        border: 1px solid var(--dossier-folder-edge);
        border-radius: var(--radius-corner);
        background:
            linear-gradient(135deg, var(--dossier-folder-paper), var(--color-bg-surface, #fff) 54%),
            var(--color-bg-surface, #fff);
        box-shadow: 0 0.75rem 2rem var(--color-black-alpha-12, rgb(0 0 0 / 12%));

        @media (min-width: 768px) {
            min-height: 22.25rem;
            aspect-ratio: 16 / 7.85;
        }
    }

    .dossier-folder__body::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 2;
        height: 0.4rem;
        background: var(--color-primary, #ffd400);
    }

    .dossier-folder__media {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: var(--color-media-placeholder-bg);
    }

    .dossier-folder__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dossier-folder__image-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.5) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.72) 100%);
        pointer-events: none;
    }

    .dossier-folder__content {
        position: absolute;
        inset-inline: var(--space-24);
        inset-block-end: var(--space-24);
        z-index: 3;
        display: grid;
        gap: var(--space-12);
        max-width: 48rem;
        color: var(--color-white);
    }

    .dossier-folder__label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: var(--space-32);
        padding: var(--space-8) var(--space-16);
        border-radius: var(--radius-corner);
        background: var(--color-content-dossier, #0f766e);
        color: var(--color-white);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold, 800);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .dossier-folder__title {
        margin: 0;
        color: var(--color-white);
        text-wrap: balance;
    }

    .dossier-folder__text {
        margin: 0;
        color: var(--color-text-on-image);
        font-size: var(--text-lg);
        line-height: var(--leading-reading);
    }

    .dossier-game-stack {
        position: relative;
        display: grid;
        gap: var(--space-14, 0.875rem);
        align-self: start;
        isolation: isolate;
        min-width: 0;
        margin-block-start: 0;

        @media (min-width: 1024px) {
            align-self: center;
            margin-block-start: 2.65rem;
            transform: translateX(-1.1rem) rotate(1.4deg);
            transform-origin: 50% 50%;
        }
    }

    .dossier-game-stack::before {
        content: none;
    }

    @media (min-width: 1024px) {
        .dossier-game-stack::before {
            content: "";
            position: absolute;
            inset-block-start: -0.95rem;
            inset-inline-start: 1.15rem;
            z-index: 5;
            width: 6.25rem;
            height: 1.55rem;
            border: 0.0625rem solid rgb(255 255 255 / 42%);
            background:
                linear-gradient(90deg, rgb(255 255 255 / 26%) 0%, rgb(255 255 255 / 54%) 52%, rgb(255 255 255 / 22%) 100%),
                repeating-linear-gradient(90deg, rgb(255 255 255 / 0%) 0 0.45rem, rgb(255 255 255 / 18%) 0.45rem 0.52rem),
                rgb(237 244 241 / 34%);
            box-shadow:
                0 0.28rem 0.75rem rgb(0 0 0 / 10%),
                inset 0 0.0625rem 0 rgb(255 255 255 / 58%),
                inset 0 -0.0625rem 0 rgb(255 255 255 / 20%);
            clip-path: polygon(0 16%, 6% 0, 94% 0, 100% 18%, 96% 100%, 7% 100%, 0 84%);
            opacity: 0.72;
            pointer-events: none;
            transform: rotate(-8deg);
            transform-origin: 50% 50%;
            backdrop-filter: blur(0.05rem);
            -webkit-backdrop-filter: blur(0.05rem);
        }
    }

    .dossier-game-card {
        position: relative;
        display: grid;
        gap: var(--space-14, 0.875rem);
        min-width: 0;
        z-index: 1;
        overflow: visible;
        padding: var(--space-16, 1rem);
        border: 1px solid var(--color-card-border);
        border-block-start: 0.35rem solid var(--color-primary, #ffd400);
        border-radius: var(--radius-corner);
        background:
            linear-gradient(180deg, color-mix(in oklch, var(--color-primary, #ffd400) 6%, var(--color-bg-surface)) 0%, var(--color-bg-surface) 44%),
            var(--color-bg-surface);
        box-shadow: 0 0.75rem 2rem var(--color-black-alpha-08, rgb(0 0 0 / 8%));
    }

    .dossier-game-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background:
            radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--color-content-dossier, #0f766e) 10%, transparent) 0 28%, transparent 29%),
            linear-gradient(180deg, transparent 0%, color-mix(in oklch, var(--color-bg-surface-alt, #f7f7f7) 45%, transparent) 100%);
        pointer-events: none;
    }

    .dossier-game-card > * {
        position: relative;
        z-index: 1;
    }

    .dossier-game-card__summary {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: var(--space-12, 0.75rem);
        align-items: center;
        min-width: 0;
    }

    .dossier-game-card__media {
        display: block;
        width: 5rem;
        height: 5rem;
        overflow: hidden;
        border-radius: var(--radius-corner);
        background: var(--color-media-placeholder-bg);
        box-shadow:
            0 0.5rem 1rem var(--color-black-alpha-12, rgb(0 0 0 / 12%)),
            0 0 0 0.125rem var(--color-bg-surface);
    }

    .dossier-game-card__packshot {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }

    .dossier-game-card__media:hover .dossier-game-card__packshot,
    .dossier-game-card__media:focus-visible .dossier-game-card__packshot {
        transform: scale(1.04);
    }

    .dossier-game-card__heading {
        display: grid;
        align-content: start;
        gap: var(--space-6, 0.375rem);
        min-width: 0;
    }

    .dossier-game-card__label {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 1.35rem;
        padding: 0 var(--space-8, 0.5rem);
        border-radius: var(--radius-round);
        background: color-mix(in oklch, var(--color-content-dossier, #0f766e) 14%, var(--color-bg-surface));
        color: var(--color-content-dossier, #0f766e);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold, 800);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .dossier-game-card__title {
        margin: 0;
        color: var(--color-heading);
        font-size: var(--text-xl);
        font-weight: var(--font-weight-extrabold, 800);
        line-height: var(--leading-tight);
    }

    .dossier-game-card__title a {
        color: var(--color-text);
        text-decoration: none;
    }

    .dossier-game-card__title a:hover,
    .dossier-game-card__title a:focus-visible {
        color: var(--color-link, var(--color-text));
    }

    .dossier-game-card__score {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8, 0.5rem);
        align-items: center;
        width: fit-content;
        padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
        border-radius: var(--radius-corner);
        background: color-mix(in oklch, var(--color-primary, #ffd400) 16%, var(--color-bg-surface));
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
    }

    .dossier-game-card__score-stars {
        display: inline-flex;
        gap: 0.125rem;
        color: var(--color-primary, #ffd400);
    }

    .dossier-game-card__score-star {
        width: 1rem;
        height: 1rem;
        fill: currentColor;
    }

    .dossier-game-card__score-star--empty {
        color: var(--color-border);
    }

    .dossier-game-card__meta {
        display: grid;
        gap: 0;
        margin: 0;
        padding-block-start: var(--space-2, 0.125rem);
        border-block-start: 1px solid color-mix(in oklch, var(--color-border) 74%, transparent);
    }

    .dossier-game-card__meta-item {
        display: grid;
        grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
        gap: var(--space-10, 0.625rem);
        align-items: start;
        padding-block: var(--space-8, 0.5rem);
        border-block-end: 1px solid color-mix(in oklch, var(--color-border) 54%, transparent);
    }

    .dossier-game-card__meta dt {
        color: var(--color-heading);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-extrabold, 800);
        line-height: var(--leading-tight);
        text-transform: uppercase;
    }

    .dossier-game-card__meta dd {
        min-width: 0;
        margin: 0;
        color: var(--color-text);
        font-size: var(--text-sm);
        line-height: var(--leading-title);
    }

    .dossier-game-card__footer {
        display: flex;
        min-width: 0;
    }

    .dossier-game-card__platforms {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        min-width: 0;
    }

    @media (max-width: 560px) {
        .dossier-folder {
            padding-block-start: var(--space-28);
        }

        .dossier-folder::after {
            inset: 2.8rem 0.5rem -0.45rem 0.5rem;
        }

        .dossier-folder__tab {
            inset-inline-start: var(--space-12);
            min-width: min(12rem, calc(100% - var(--space-24)));
            min-height: 2.4rem;
        }

        .dossier-folder__body {
            min-height: 20rem;
        }

        .dossier-folder__content {
            inset-inline: var(--space-16);
            inset-block-end: var(--space-16);
        }

        .dossier-folder__text {
            font-size: var(--text-base);
        }

        .dossier-game-card {
            padding: var(--space-14, 0.875rem);
        }

        .dossier-game-card__media {
            width: 5.25rem;
            height: 5.25rem;
        }

        .dossier-game-card__summary {
            grid-template-columns: 5.25rem minmax(0, 1fr);
        }

        .dossier-game-card__meta-item {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-4, 0.25rem);
        }
    }
}