/* === GRID === */
body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 20%);
}

header {
    grid-row: 1;
    grid-column: 1 / span 3;
    background-color: darkgray;
}

main {
    grid-row: 2 / span 4;
    grid-column: 1 / span 3;
    justify-items: center;
}

footer {
    grid-row: 5;
    grid-column: 1 / span 3;
    background-color: lightgray;
}

.two-col {
    display: grid;
    grid-template-columns: repeat(2, max(40vw));
    gap: 5.5vw;
}

.three-col {
    display: grid;
    grid-template-columns: repeat(3, max(28vw));
    gap: 5.5vw;
}

.inner-two-col {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 10px;
    justify-content: space-between;
    word-break: keep-all;
}

.inner-five-col {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 5px;
    justify-content: space-between;
}

.col1 {
    grid-column: 1;
}

.col2 {
    grid-column: 2;
}

.col3 {
    grid-column: 3;
}

.col4 {
    grid-column: 4;
}

.col5 {
    grid-column: 5;
}

.row1 {
    grid-row: 1;
}

.row2 {
    grid-row: 2;
}

.row3 {
    grid-row: 3;
}

/* === NAV BAR === */
nav {
    position: relative;
    width: 100%;
}

nav li {
    float: left;
    list-style-type: none;
    padding: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

.dropdown-content a {
    display: block;
}

.dropdown-content {
    display: none;
}

.dropdown:hover .dropdown-content {
    display: block;
}