.\33 col-layout {
    display: grid;
    grid-template: auto auto / auto auto auto;
    column-gap: 30px;
    justify-content: center;

    >.col1 {
        width: 865px;
    }
    >.col2, >.col3 {
        width: 320px;

        #page.ranking & {
            margin-top: 2rem;
        }
    }
    >.col3 {
        display: grid;
        grid-auto-rows: min-content;
        align-items: start;
        gap: 23px 30px;
        grid-row: 1;

        >h2 {
            margin: .5em 0 0;
        }
    }

    /* Double column, col3 underneath. */
    @media (max-width: 1564px) {
        grid-template-columns: min-content min-content;

        >.col3 {
            grid-area: 2 / 1 / 2 / -1;
            width: 100%;

            // Internal grid.
            grid-template-columns: repeat(3, 320px);

            #page.ranking & {
                margin-top: 0;
            }
        }
    }

    /* Double column, col2+3 underneath. */
    @media (max-width: 1214px) {
        grid-template-columns: 1fr 1fr;

        >.col1 {
            grid-column: 1 / -1;
        }
        >.col2 {
            grid-row: 2;
            width: 100%;

            #page.ranking & {
                margin-top: 0;
            }
        }
        >.col3 {
            grid-column: 1;
            grid-template-columns: none;
        }
    }

    /* Shrink col1 when viewport smaller than width. */
    @media (max-width: 865px) {
        >.col1 {
            width: 100%;
        }
    }

    /* Single column. */
    @media (max-width: 669px) {
        grid-template-columns: auto;

        >.col1 {
            grid-column: 1;
        }
        >.col3 {
            grid-area: 3;
        }
    }
}
