#default-page {
    margin-top: var(--size_l);
    row-gap: var(--size);
    padding: 1.25rem;
}

#default_p-info {max-width: 32rem;}
#default_p-info .--help {opacity: .5;}

#default_p-article {row-gap: var(--size);}

@media only screen and (min-width: 768px) {
    #default-page {margin-top: var(--size_xl);}
}

@media only screen and (min-width: 1096px) {
    #default-page:not(.--faqs) h2 {
        position: sticky;
        top: 0;
        grid-column: 1/3;
        grid-row: 1;
        margin-left: var(--size_l);
        margin-right: var(--size_xl);
    }

    #default-page.--faqs h2 {
        grid-column: 1/-1;
        grid-row: 1;
        text-align: center;
        margin-bottom: var(--size_l);
    }

    #default_p-info {
        grid-column: 3/-1;
        grid-row: 1;
    }

    #default-page:not(.--faqs) #default_p-article {
        grid-column: 3/-1;
        grid-row: 2;
    }

    #default-page.--faqs #default_p-article {
        grid-column: 1/-1;
        grid-row: 2;
    }

    #default_p-index {
        position: sticky;
        top: var(--size_l);
        grid-column: 1/3;
        grid-row: 2;
        margin-top: var(--size_l);
        margin-right: var(--size_l);
        margin-left: var(--size_l);
        row-gap: var(--size);
        height: fit-content;
        background: rgba(245, 245, 245, .7);
        backdrop-filter: blur(10px);
    }
}


@media (hover: hover) {
    #default_p-index button {transition: opacity 500ms;}
    #default_p-index:hover button {opacity: .5;}
    #default_p-index button:hover {opacity: 1;}
}