@layer pages {
    .nur-typegrid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-4);
    }

    .nur-typecard {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
    }

    .nur-typecard img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .nur-typecard__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-2);
        padding: var(--nur-space-4);
    }

    .nur-typecard__count {
        color: var(--nur-gold-600);
        font-size: var(--nur-text-xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .nur-steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-3);
        counter-reset: step;
    }

    .nur-steps li {
        position: relative;
        padding: var(--nur-space-4) var(--nur-space-4) var(--nur-space-4) 64px;
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
        border: 1px solid var(--nur-line);
        counter-increment: step;
    }

    .nur-steps li::before {
        content: counter(step);
        position: absolute;
        left: var(--nur-space-4);
        top: var(--nur-space-4);
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--nur-gold-500);
        color: var(--nur-navy-900);
        font-weight: 800;
    }

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

        .nur-steps {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .nur-typegrid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}