@supports (height:100dvh) {

    .grid-container,
    body,
    html {
        min-height: 100dvh;
        max-height: 200dvh;

    }
}

@supports not (height:100dvh) {

    .grid-container,
    body,
    html {
        min-height: 100vh;
        max-height: 200vh;

    }
}

body {
    min-width: 100vw;
}

.grid-container {
    display: grid;
    grid-template-areas:
        "left-sidebar-ads header right-sidebar-ads"
        "left-sidebar-ads main-container right-sidebar-ads"
        "left-sidebar-ads footer right-sidebar-ads";
    grid-template-columns: minmax(130px, 1fr) 4fr minmax(130px, 1fr);
    grid-template-rows: auto 1fr auto;
}

.header {
    grid-area: header;
    text-align: center;
    line-height: 70px;
    height: 70px;
}

.footer,
.main-container {
    display: flex;
    align-items: center;
}

.main-container {
    grid-area: main-container;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    overflow: hidden;
}

.footer {
    grid-area: footer;
    justify-content: center;
    height: 30px;
}

.left-sidebar-ads {
    grid-area: left-sidebar-ads;
}

.right-sidebar-ads {
    grid-area: right-sidebar-ads;
}

.ads {
    display: grid;
    place-items: center;
}

@media (max-width:768px) {
    .grid-container {
        display: grid;
        grid-template-areas:
            "header right-sidebar-ads"
            "main-container right-sidebar-ads"
            "footer right-sidebar-ads";
        grid-template-columns: 4fr 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .header {
        height: 65px;
        line-height: 65px;
    }

    .ads.left-sidebar-ads {
        display: none;
    }

    .footer {
        height: 28px;
    }
}

@media (max-width:480px) {
    .grid-container {
        display: grid;
        grid-template-areas:
            "header"
            "right-sidebar-ads"
            "main-container"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
    }

    .header {
        height: 60px;
        line-height: 60px;
    }

    .ads.left-sidebar-ads {
        display: none;
    }

    .ads.right-sidebar-ads {
        height: 40px;
    }

    .footer {
        height: 25px;
    }
}

@media (max-height:500px) {
    .header {
        height: 45px;
        line-height: 45px;
    }

    .footer {
        height: 20px;
    }
}