/*@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."".top-c top-c top-c top-c."".comp comp comp comp."".side-r side-r side-r side-r."".side-l side-l side-l side-l."".bot-a bot-a bot-a bot-a."".bot-b bot-b bot-b bot-b.";
        display: grid
    }


    @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."".top-c top-c top-c top-c."".side-l comp comp side-r."".bot-a bot-a bot-a bot-a."".bot-b bot-b bot-b bot-b."
        }
    }
}
.container-top-c {
    grid-column: top-c;
}

*/
.mysection{
  background-color: silver;
}

.mysection{
  /* The image used */
  background-image: url("/images/headers/hd_wpp_blue.webp");

  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}