/*
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
*/

body { display: flex; flex-flow: column }
body > main  { min-height: 50vh }
body > aside { min-height: 30vh }
body > header, body > footer { min-height: 10vh }

@media (orientation: landscape) {
  body           { flex-flow: row wrap }
  body > main    { flex-basis: 70% }
  body > aside   { flex-basis: 30% }
  body > main,
  body > aside   { min-height: 80vh }
  body > header,
  body > footer  { flex-basis: 100% }
}

@media (min-width:786px) {
  body { margin: auto 5vw }
}

@media (min-width:1300px) {
  body { margin: auto 23vw }
}

/*
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
*/

body { display: flex; flex-flow: column }
body > main  { min-height: 50vh }
body > aside { min-height: 30vh }
body > header, body > footer { min-height: 10vh }

@media (orientation: landscape) {
  body           { flex-flow: row wrap }
  body > main    { flex-basis: 70% }
  body > aside   { flex-basis: 30% }
  body > main,
  body > aside   { min-height: 80vh }
  body > header,
  body > footer  { flex-basis: 100% }
}

@media (min-width:786px) {
  body { margin: auto 5vw }
}

@media (min-width:1300px) {
  body { margin: auto 23vw }
}

Add link to basic concepts for flexbox
Add link to basic concepts for flexbox
