/* Changing the display order on small screens */
/*
@supports (display: grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
    grid-template-areas: ". banner banner banner banner ."
                         ". top-a top-a top-a top-a ."
                         ". top-b top-b top-b top-b ."
                         ". side-l side-l side-l side-l ."
                         ". comp comp comp comp ."
                         ". side-r side-r side-r side-r ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b .";
    display: grid;
  }

  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;
  }

  .site-grid > .full-width {
    grid-column: full-start / full-end;
  }

  @media (width >= 992px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner ."
                           ". top-a top-a top-a top-a ."
                           ". top-b top-b top-b top-b ."
                           ". side-l comp comp side-r ."
                           ". bot-a bot-a bot-a bot-a ."
                           ". bot-b bot-b bot-b bot-b .";
    }
  }
}
*/

/* Changing the background colour of the page header */
.container-header {
 background-color: #ebf2fa;
 background-image: none;
}
.container-header .mod-menu {
 color: #000;
 font-size: 1.0rem;
 flex: unset;
}
.container-header .navbar-toggler {
 color: #000;
 border: 1px solid #000;
}