/*Same as 2col*/

.grid-container {
    display: grid;
    gap: 0;

    grid-template-columns: 1fr 250px;
    grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
}

.header {
    grid-area: header;
}

.footer {
    grid-area: footer;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-rows: repeat(3, auto);
        grid-template-columns: 100%;
        grid-template-areas:
    "header"
    "content"
    "footer";
    }

    .sidebar {
        display: none;
    }

}