jkl* { box-sizing: border-box; }

/* Referenced by
   tomveatch.com/re/value/index.php
   tomveatch.com/re/TenantSelectionPolicy.php
 */

ul { list-style-type: none; }

.mheader      { grid-area: mheader;   }
.mtitle       { grid-area: mtitle;    }
.rbar         { grid-area: rbar;      }
.lbar         { grid-area: lbar;      }
.maintop      { grid-area: maintop;  }
.main         { grid-area: main;  }
.mfooter      { grid-area: mfooter;   align-self: end;  }

/* Default presentation is for small devices: phones, 600px and narrower.
   Works fine for old big devices.
   @media only screen and (max-width: 600px) { } 
 */

.site { 
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(7,auto);
  grid-row-gap: 20px;
  grid-column-gap: 0px;
  grid-template-areas:
      "mheader"
      "mtitle"
      "lbar"
      "maintop"
      "main"
      "rbar"
      "mfooter";
}


/* medium devices: above 600px: big phones, portrait tablets */
@media only screen and (min-width: 600px) {
  .site {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(6,auto);
    grid-gap: 10px;
    grid-template-areas:
      "mheader mtitle"
      "lbar maintop"
      "lbar main"
      "rbar main"
      ".    main"
      "mfooter mfooter"
  }
}

/* med-large devices: above 768px: landscape tablets */
@media only screen and (min-width: 768px) {
  .site { 
    display: grid;
    grid-template-columns: 2fr 1fr 5fr 1fr ;
    grid-template-rows: repeat(3, auto);
    grid-gap: 10px;
    grid-template-areas:
      "mheader . mtitle . "
      "lbar . main rbar"
      "mfooter . mfooter mfooter";
  }
}

/* large devices: above 992px: laptops and small desktops */
@media only screen and (min-width: 992px) {
  .site { 
    display: grid;
    grid-template-columns: 1fr 4fr 4fr 1fr;
    grid-template-rows: auto 50px 1fr auto auto;
    grid-gap: 20px;
    grid-template-areas:
      "mheader mtitle mtitle . "
      "lbar maintop maintop rbar"
      "lbar main main rbar"
      ".    .        .         ."
      "mfooter mfooter mfooter mfooter";
  }
}

/* XL devices: above 992px: laptops and small desktops */
@media only screen and (min-width: 1199px) {
    .site { 
     grid-gap: 20px;
    }
}

@support (display: grid-area-auto) { /* most browsers, fallback to the above default (mobile) */
}