@supports (display: grid) {
    .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 ."
                         ". 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-b bot-b bot-b  .";
    display: grid;
  }
  @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". 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  ."
              ". banner banner banner banner ."
        }
    }
}

body.site {
	background: transparent;
	background-image: url(../../../../../images/BG-yellowReduced.jpg);
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.container-header {
	background-color: transparent;
	background-image: none; 
	.mod-menu {
		color: #2f6eba;
		justify-content: center;
   		padding: 0;
	}
}

.card {
    background: transparent;
}

.card-header {
  font-size: 1.2rem;
}

.container-bottom-a {
	display: flex;
}

.container-footer {
	display: flex;
  	background-color: transparent;
	background-image: none; 
	.mod-menu {
		color: #2f6eba;
	}
}

.footer .grid-child {
	justify-content: center;
}

h1, .h1 {
    font-size: calc(1.0rem + 0.5vw);
}

.me-md-2 {
  margin-right: 2rem !important; 
  float: left;
}