@media (max-width: 68rem)
{
    :root {
        --padding-x: 2rem;
        --padding-y: 4rem;
    }

    h1 { font-size: 1.75rem }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }

    ul.pills li a { padding: 2rem 2rem; }
    ul.pills li a img { height: 3rem; }
}

@media (max-width: 48rem)
{
    :root {
        --padding-x: 2rem;
        --padding-y: 2rem;
    }
    
    p, ul { font-size: 1.125rem; }

    a.button { font-size: 1.125rem; margin-bottom: 2rem; }

    header { justify-content: center; }

    ul.pills
    {
        flex-flow: column nowrap;
        justify-content: center;
        padding: var(--padding-y) var(--padding-x);
        gap: 2rem;
        min-height: 0;
    }
    ul.pills li:first-child a { border-radius: 99rem; }
    ul.pills li:last-child a { border-radius: 99rem; }
    ul.pills li a img {}
}

@media (max-width: 32rem)
{
    :root {
        --padding-x: 1rem;
        --padding-y: 2rem;
    }

    h1 { font-size: 1.5rem; }

}