/* Derived from ../responsive.css on 1/6/2019 
   because I couldn't figure out how to prevent mfooter from crossing over 
   maintop where lbar was short.  So copy/fork responsive.css 
   and have only one main section, not three.

   Also I couldn't debug a transition for the medium sized screen which 
   made the main column wierdly narrow:

   // 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";
     }
   }
 */

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

ul { list-style-type: none; }

.mheader      { grid-area: mheader;   }
.mtitle       { grid-area: mtitle;    }
.rbar         { grid-area: rbar;      }
.lbar         { grid-area: lbar;      }
.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(6,auto);
  grid-row-gap: 20px;
  grid-column-gap: 0px;
  grid-template-areas:
      "mheader"
      "mtitle"
      "lbar"
      "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(5,auto);
    grid-gap: 10px;
    grid-template-areas:
      "mheader mtitle"
      "lbar main"
      "rbar main"
      ".    main"
      "mfooter mfooter"
  }
}

/* large devices: above 992px: laptops and small desktops */
@media only screen and (min-width: 992px) {
  .site { 
    display: grid;
    grid-template-columns: 1fr 5fr 3fr;
    grid-gap: 20px;
    grid-template-areas:
      "mheader mtitle  ."
      "lbar    main    rbar"
      "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) */
}