body {
    
    max-width: 75em;
    
    grid-template-rows: auto auto auto auto 1fr auto auto;
  }
  
  body > header               { grid-row: 1; }
  body > ul.feedback          { grid-row: 2; }
  body > ul#breadcrumbs       { grid-row: 3; }
  body > nav.secondary,
  body > div#searchFilters    { grid-row: 4; }
  body > main                 { grid-row: 5; }
  body > section#newsletter   { grid-row: 6; }
  body > footer               { grid-row: 7; }
  
  main {
    position: relative;
  }
  
  /* As an item of the <body> grid, <main> would otherwise never be narrower than its widest child. */
  /* It also takes the whole height of its row, which a page with little content centres itself in (eg. "page not found"). */
  body > main {
    min-width: 0;
    align-self: stretch;
  }
    
  body:has(nav.secondary) > main {
    margin-bottom: 2em;
  }
  
  @media screen and (min-width: 700px) {
    
    body > nav.secondary {
      
      grid-row: 5;
      grid-column: 1;
    }
    
    body:has(nav.secondary) > main {
      grid-column: 2;
    }
    
    body > ul.feedback,
    body > ul#breadcrumbs,
    body > section#newsletter {
      
      grid-column: 1 / -1;
    }
  }