/* See https://medium.com/flexbox-and-grids/how-to-efficiently-master-the-css-grid-in-a-jiffy-585d0c213577 */
/* https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/ */
/* https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/ */


.grid-dash {
grid-area: dash;
}

.grid-front {
grid-area: front;
}

.grid-gear {
grid-area: gear;
}

.grid-rear {
grid-area: rear;
height: 10vh;
}

.grid-roof {
grid-area: roof;
}

.grid-steer {
grid-area: steer;
}

.grid-wing {
grid-area: wing;
}

@media (orientation: portrait) {
body {
display: grid;
grid-template-areas:
"front"
"front"
"front"
"rear"
"steer"
"steer"
"dash";
justify-items: center;
}

.grid-roof {
display: none;
}

.grid-wing {
display: none;
}

}

@media (orientation: landscape) {

body {
display: grid;
grid-template-columns: 2fr 3fr 1fr 2fr;
grid-template-areas:
"roof   front   rear    wing"
"roof   front   rear    wing"
"roof   front   steer   wing"
"roof   front   steer   wing"
"roof   front   steer   wing"
"dash   dash    dash    dash";
}

.grid-rear {
height: 25vh;
}

}