@media (min-width: 768px) {
    .app__shell {
        padding: 1.75rem;
    }

    .translator__card {
        padding: 1.6rem;
    }

    .translator__panes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1200px) {
    .app__overlay {
        display: none;
    }

    .app__layout {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .app--history-open .app__layout {
        grid-template-columns: minmax(0, 1fr) 24rem;
    }

    .history-panel {
        position: sticky;
        top: 1.75rem;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-height: calc(100vh - 3.5rem);
    }

    body:not(.app--history-open) .history-panel {
        display: none;
    }

    .features {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}