* {box-sizing: border-box;}

#wrapper {
    display: grid;
    grid-template-rows: 95px 430px 862px 213px;
    grid-template-columns: 105px minmax(0, 990px) 105px; 
}

body {
    margin: 0px;
}

nav {
    grid-row: 1 / 2;
    grid-column: 1 / 4;
    background-color: red;
    opacity: 50%;
    border: 2px solid;
}

#hero {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
    background-color: blue;
    opacity: 50%;
    border: 2px solid;
}

#wrap {
    grid-row: 1 / 5;
    grid-column: 2 / 3;
    background-color: black;
    opacity: 20%;
    border: 2px solid;
}

main {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    background-color: yellow;
    opacity: 50%;
    border: 2px solid;
}

footer {
    grid-row: 4 / 5;
    grid-column: 1 / 4;
    background-color: green;
    opacity: 50%;
    border: 2px solid;
}