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) minmax(100px, 350px) minmax(10px, 1fr);
}

nav {
    order: 3;
}

header .social {
    order: 2;
}
/*classes to use*/
:where(.columns) article:has(h1) {
    grid-column: span 2;
}

/*navigation*/

nav ul {
    visibility: hidden;
    background-color: black;
    color: white;
    width: 100%;
    left: 0;
    margin-top: 54px;
    min-height: calc(100vh - 54px);
    position: absolute;
    transform: translateX(100%);
    transition: transform 500ms ease-in-out;
    animation: visible-invisble 1s infinite;
}

nav a {
    width: 100%;
}

nav li a:active {
    filter: brightness(60%)
}

@keyframes visible-invisble {
    from {
        visibility: visible;
    }
    to {
        visibility: hidden;
    }
}