.container  {
    display: grid;
    grid-template-rows: 8rem auto 8rem;
    grid-template-areas: 
    "header"
    "article"
    "footer"
    ;
}

.view-height {
    height: 100vh;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 2rem;
}
.wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
}

header {grid-area: header;}

article {grid-area: article;}

footer {grid-area: footer;}

/* .hero {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-gap: 2rem;
    height: 66vh;
} */

.work {
    grid-column: 1 / -1;
}

header, footer{align-items: center;}

.column-1 {grid-column: 1 / span 1;}
.column-2 {grid-column: 2 / span 1;}
.column-3 {grid-column: 3 / span 1;}
.column-4 {grid-column: 4 / span 1;}

.two-column-left {grid-column: 1 / span 2;}
.two-column-middle {grid-column: 2 / span 2;}
.two-column-right {grid-column: span 2 / -1;}

.all-columns {grid-column: 1 / -1;}

.card-left {
    grid-column: 1 / span 1;
}
.card-right {
    grid-column: 2 / span 1;
}

.align-end {
    align-self: end;
}


/* MARGIN */
.m-all-1 {margin: 1rem}
.m-all-2 {margin: 2rem}
.m-all-3 {margin: 4rem}
.m-all-4 {margin: 8rem}

.m-top-1 {margin-top: 1rem}
.m-top-2 {margin-top: 2rem}
.m-top-3 {margin-top: 4rem}
.m-top-4 {margin-top: 8rem}

.m-bottom-1 {margin-bottom: 1rem}
.m-bottom-2 {margin-bottom: 2rem}
.m-bottom-3 {margin-bottom: 4rem}
.m-bottom-4 {margin-bottom: 8rem}

/* PADDING */
.p-all-1 {padding: 1rem}
.p-all-2 {padding: 2rem}
.p-all-3 {padding: 4rem}
.p-all-4 {padding: 8rem}

.p-top-1 {padding-top: 1rem}
.p-top-2 {padding-top: 2rem}
.p-top-3 {padding-top: 4rem}
.p-top-4 {padding-top: 8rem}

.p-bottom-1 {padding-bottom: 1rem}
.p-bottom-2 {padding-bottom: 1.5vw}
.p-bottom-3 {padding-bottom: 4rem}
.p-bottom-4 {padding-bottom: 8rem}