body {
    background-color: white;
}

* {
    box-sizing: border-box;
}

#wrapper {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
    grid-template-rows: auto;
}

header {
    background-color: rgba(250, 8, 8, 0.5);
    height: 100px;
    grid-column: 2 / 8;
    grid-row: 1 / 2;    
}

.heropic {
    height: 400px;   
    background-color: rgba(2, 129, 2, 0.5);
    grid-column: 2/ 8;
    grid-row: 2 / 3;    
}

main {
    height: 700px;;
    background-color: yellow;
    grid-column: 2 / 8;
    grid-row: 3 / 4;


}

footer {
    background-color: blueviolet;
    height: 100px;
    grid-column: 2 / 8;
    grid-row: 4 / 5;

}