body {
    display: grid;
    grid-template-areas:
        'header header header header'
        ' main-banner main-banner main-banner main-banner'
        '. main aside .'
        'footer footer footer footer';
    grid-template-columns: 
        minmax(10px, 1fr) minmax(400px, 850px) 350px minmax(10px, 1fr);
}
/*classes to use*/
.columns-2 {
    grid-template-columns: 1fr 1fr;
}

.columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

:where(.columns) article:has(h1) {
    grid-column: span 2;
}

/*navigation menu*/

nav ul {
    display: flex
}
nav li a {
    padding: 1em 1em;
    color: black;
    display: inline-block;
    transition: background-color 1s, color 1s;
    text-decoration: none;
}

nav li a:active {
    background-color: var(--color-primary);
    color: white;
}

nav li a:hover {
    background-color: var(--color-secondary);
    color: white;
}
 
/*hamburger & menu-btn*/
.hamburger, .menu-btn {
    display: none;
}