div {
  box-sizing: border-box; }

.center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

#container {
  min-height: 100vh;
  width: 100%; }

@media (max-width: 640px) {
  #container {
    width: 100%; }

  #h-1, #h-2, #h-3, #f-1, #f-2, #f-3, #f-4, #f-4-1, #f-4-2 {
    width: 100%; }

  #h-1 {
    order: 1; }

  #h-3 {
    order: 2; }

  #h-2 {
    order: 3; } }
@media (min-width: 640px) and (max-width: 960px) {
  #h-1, #h-3, #f-1, #f-2, #f-3, #f-4 {
    width: 50%; }

  #h-2, #f-4-1, #f-4-2 {
    width: 100%; }

  #h-1 {
    order: 1; }

  #h-3 {
    order: 2; }

  #h-2 {
    order: 3; } }
@media (min-width: 960px) and (max-width: 1280px) {
  #f-1, #f-2, #f-3 {
    width: 33.33%; }

  #h-1, #h-3, #f-4-1, #f-4-2 {
    width: 50%; }

  #h-2, #f-4 {
    width: 100%; }

  #h-1 {
    order: 1; }

  #h-3 {
    order: 2; }

  #h-2 {
    order: 3; } }
@media (min-width: 1280px) {
  #h-1, #h-3, #f-1, #f-2, #f-3, #f-4 {
    width: 25%; }

  #h-2 {
    width: 50%; }

  #f-4-1, #f-4-2 {
    width: 100%; } }
#container {
  display: flex;
  flex-flow: column; }

header {
  flex: 0 1 auto; }

main {
  flex: 1 1 auto; }

footer {
  flex: 0 1 auto; }

header, main, footer, #f-4 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; }