@media (max-width: 920px) {
    .landing-grid,
    .auth-shell,
    .characters-layout {
        grid-template-columns: 1fr;
    }

    .account-banner,
    .panel-head,
    .selection-strip {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .landing-shell,
    .auth-shell,
    .characters-shell {
        width: calc(100vw - 24px);
        padding-top: 12px;
        padding-bottom: 16px;
    }

    .landing-hero {
        grid-auto-flow: row;
    }

    .landing-actions,
    .auth-side-links,
    .account-banner-actions {
        flex-direction: column;
    }

    .account-banner,
    .roster-panel,
    .card-panel--news,
    .card-panel--fact,
    .auth-panel,
    .landing-hero {
        padding: 18px;
    }

    .drawer-row {
        align-items: stretch;
    }

    .drawer-row-top {
        align-items: flex-start;
        flex-direction: column;
    }
}