@media only screen and (min-width: 700px) {

.tv {
    display: grid;
    grid-template-rows: [header] 1fr [body] 2fr [extra] 2fr [footer] auto;
    grid-template-columns: [menu] 31vh [content] 3fr [info] 1fr;
    grid-template-areas:
        "logo main current"
        "menu main list"
        "credit main history"
        "theme main history";
    gap: 10px;
    margin: 1.5em auto;
    padding: 1em;
    width: 80vw;
    height: 88vh;
    border: var(--b-bord);
    background-color: var(--b-bg);
    background-image: var(--b-bg-img);
    border-radius: 25px;
}

.main {
    grid-column: content;
    grid-row: header / span 3;
    grid-area: main;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
}

.info {
    width: 50%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 1em;
    border-left: var(--c-bord);
}

.current {
    grid-column: info;
    grid-row: header;
    grid-area: current;
}

.list {
    grid-column: info;
    grid-row: body;
    grid-area: list;
}

.history {
    grid-column: info;
    grid-row: extra / span 2;
    grid-area: history;
}

.main, .current, .list, .history {
    padding: 1em;
    border: var(--c-bord);
    background-color: var(--c-bg);
    border-radius: 25px;
}

}