/* set correct box model */
* {
    box-sizing:border-box;
}

body{
  
  margin:0rem;
  }

/* flexbox container */
.holy-grail-flexbox {
    display:flex;
    flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
    width:100%;
    padding:1rem;
}

/* background colors */
.holy-grail-flexbox > .header {background:#110502}
.holy-grail-flexbox > .main-content {background:#712A0A}
.holy-grail-flexbox > .left-sidebar {background:#E13607}
.holy-grail-flexbox > .right-sidebar {background:#DC1001}
.holy-grail-flexbox > .footer {background:#FCAA36}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:50%;
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-flexbox > .header {
        order:-2; /* header first */
    }
    .holy-grail-flexbox > .left-sidebar {
        /* left sidebar second (first in second row) */
        order:-1; 
    }
    .holy-grail-flexbox > .main-content {
        width:50%;
    }
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:25%;
    }
}