@layer page {
    body {
        --card-base: color-mix(in lab, var(--guide-base), #fff 25%);
        --zone-color: color-mix(in lab, var(--guide-base), #000 75%);
        background: color-mix(in lab, var(--guide-base), #fff 90%);
    }

    h1 > a {
        &:hover {
            text-decoration: underline 3px solid;
        }
    }

    main {
        justify-self: center;

        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 5rem 2.5rem;
        gap: 5rem;

        @media screen and (max-width: 1024px) {
            padding: 3rem 1rem;
            gap: 3rem;

            .card {
                width: 100%;
            }
        }
    }

    .card {
        grid-template-rows: auto 1fr auto;
    }
}
