body {
    display: grid;
    width: 70vw;
    margin: auto;
    gap: 8px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-attachment: scroll;
    aspect-ratio: 9/21;
    background-position: center;
    background-size: 1300px;
}

@media only screen and (max-width: 3840px) {
    body {
        width: 1300px;
        grid:
            "header header"auto "main aside"1fr "footer footer"auto / auto 350px;
    }
}

@media only screen and (max-width: 1920px) {}

@media only screen and (max-width: 1366px) {
    body {
        width: 100%;
    }
}

@media only screen and (max-width: 1024px) {
    body {
        grid:
            "header"auto "main"1fr "aside"auto "footer"auto / 1fr;
    }
}

body {
    background-color: var(--root-color-body------tlo);
    color: var(--root-color-text-----main);
}

header {
    grid-area: header;
    background-color: var(--root-color-header----tlo);
    color: var(--root-color-text----title);
}

aside {
    grid-area: aside;
    background-color: var(--root-color-aside-----tlo);
}

main {
    grid-area: main;
    background-color: var(--root-color-main------tlo);
}

footer {
    grid-area: footer;
    background-color: var(--root-color-footer----tlo);
}