• View layout
• Layout 27 on Github

Built this layout with 3 breakpoints. I'm running into confusion using responsive images. To help I colorized aka art directed different images to help sort this out. I'm going to figure this out.

Finally, made a late night commit to add CSS specificity rules and sort CSS in order of power. I'll adopt on other layouts.

 <img sizes="(min-width: 30em) 50vw, 100vw" srcset="img/027/ciclavia-52@square.jpg 300w, img/027/ciclavia-52@0.5x.jpg 800w, img/027/ciclavia-52@cool.jpg 1200w" src="img/027/ciclavia-52@purple-wall.jpg" alt="zamboni operator smiling">

CSS Code

CSS Grid Code with 3 media queries

 <style type="text/css">
      /* minor third */
      :root {
        --font-size-xxx-large: 3.583rem;
        --font-size-xx-large: 2.488rem;
        --font-size-x-large: 2.074rem;
        --font-size-large: 1.728rem;
        --font-size-medium: 1.2rem;
        --font-size: 1rem;
        --font-size-small: .833rem;
      }

      body {
        font-family: 'Noto Serif', serif;
        display: grid;
        grid-template-areas:
          "quote"
          "zamboni"
          "article"
          "footer";
        height: 100vh;
      }

   
      @media (min-width: 30em) {

        body {
          grid-gap: 2vw;
          grid-template-columns: 2fr 3fr;
          grid-template-areas:
            ". zamboni"
            "quote zamboni"
            ". article"
            ". footer";
        }

        
      }

      @media (min-width: 62em) {

        body {
          grid-gap: 2vw;
          grid-template-columns: 2fr 2fr 3fr;
          grid-template-areas:
            ". zamboni . ."
            "quote zamboni article ."
            ". zamboni footer .";
        }

      
      }

    </style>