  
  body > header,
  body > main > section,
  body > main > article,
  body > footer {
    
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    
    column-gap: 2rem;
    row-gap: 1rem;
    
    align-items: center;
    
    padding: 2rem 1rem;
  }
  
  body > main > section.withTitle,
  body > main > section.alignTop,
  body > footer.alignTop {
    
    align-items: start;
  }
  
  body > main > section.withTitle > :first-child {                   /* ky është titulli ose containeri i titullit */
    
    grid-column: 1 / -1;
    
    width: 100%;
    
    display: flex;
    flex-flow: row nowrap;
    justify-items: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  
  body > main > section.withTitle > :first-child > :first-child {    /* normalisht ky është titulli brenda containerit */
    margin-right: auto;
  }
  
  body > main > section.narrowSection,
  body > main > article.narrowSection {
    max-width: 40em;
    align-self: center;
  }
  
  body > header > img,
  body > main > section > img,
  body > main > article > img {
    
    max-height: 20rem;
    justify-self: center;
  }
  
/* ################################################################################################# --- MIN WIDTH: 700 */
  
  @media screen and (min-width: 700px) {
    
    body > main > section.twoColumns,
    body > header.twoColumns,
    body > footer.twoColumns {
      
      grid-template-columns: 1fr 1fr;
    }
  }
  
/* ################################################################################################# ---  MIN WIDTH: 960 */
  
  @media screen and (min-width: 960px) {
    
    body > header,
    body > main > section,
    body > main > article,
    body > footer {
      
      padding: 4em 1em;
    }
  }
  