* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.layout {
    display: grid;
    gap: 0.25rem;
    grid-template-rows:
        4rem 6rem auto 6rem 6rem 6rem 4rem;
    grid-template-columns: 1fr;
    grid-template-areas:
        'header' 
        'sidebar-left'
        'main' 
        'widget'
        'statistics'
        'sidebar-right' 
        'footer';
    height: 100vh;
}

@media (min-width: 420px) {
    .layout {
        display: grid;
        grid-template-rows: 4rem 6rem auto 8rem 6rem 4rem;
        grid-template-columns: auto auto;
        grid-template-areas:
            'header header'
            'sidebar-left sidebar-left'
            'main main'
            'widget statistics'
            'sidebar-right sidebar-right'
            'footer footer';
    }
}

@media (min-width: 720px) {
    .layout {
        display: grid;
        grid-template-rows: 4rem auto 8rem 4rem;
        grid-template-columns: 10rem auto auto 10rem;
        grid-template-areas:
            'header header header header'
            'sidebar-left main main sidebar-right'
            'sidebar-left widget statistics sidebar-right'
            'footer footer footer footer';
    }
}

main {
    grid-area: main;
    background: #B0EE94;
}

header {
    grid-area: header;
    background: #c08bfd;
}

footer {
    grid-area: footer;
    background: #c08bfd;
}

.sidebar-left {
    grid-area: sidebar-left;
    background: #f6c356;
}

.sidebar-right {
    grid-area: sidebar-right;
    background: #f6c356;
}

.widget {
    grid-area: widget;
    background: #ff8983;
    width: 100%;
}

.statistics {
    grid-area: statistics;
    background: #99c2fe;
    width: 100%;
}