.main {
    display: grid;
    place-content: center;
    gap: var(--padding-m);

    & > :is(.primary, .secondary) {
        display: grid;
        grid: 3em / repeat(5, 3em);
    }

    & > h1 {
        margin-block-end: 0;
    }

    ul {
        display: flex;
        flex-flow: column;
        gap: var(--padding-s);
        padding-inline-start: var(--padding-l);

        @media (hover) and (prefers-reduced-motion: no-preference) {
            & > li {
                transform-origin: left center;
                transition: opacity .2s ease-in-out .1s, transform .1s ease-in-out .1s;
            }

            &:has(> li:hover) > li:not(:hover),
            &:has(> li:focus-within) > li:not(:focus-within) {
                opacity: .25;
                transform: scale(.9);
            }
        }
    }
}