/* This sets up VBS webpage layout */


/* --------------------------------------------- */
/* Display based on screen sizes                 */
/* --------------------------------------------- */

.grid-container {
   display: grid;
   max-width:100%;
   grid-template-areas:
    'header'
    'menu'
    'info1'
    'info2'
    'info3'
    'info4'
    'info5'
    'info6'
    'info7'
    'info8'
    'footer';
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}

@media only screen and (min-width: 580px) {
.grid-container {
  display: grid;
  max-width:100%;
  grid-template-areas:
    'header menu menu menu menu menu'
    'info1 info1 info2 info2 info3 info3'
    'info1 info1 info4 info4 info5 info5'
    'info1 info1 info6 info6 info7 info7'
    'info8 info8 info8 info8 info8 info8'
    'footer footer footer footer footer footer';
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}
}


@media only screen and (min-width: 800px) {
.grid-container {
   display: grid;
   max-width:100%;
   grid-template-areas:
    'header menu menu menu'
    'info1 info1 info1 info1'
    'info2 info2 info3 info3'
    'info4 info4 info5 info5'
    'info6 info6 info7 info7'
    'info8 info8 info8 info8'
    'footer footer footer footer';
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}
}


@media only screen and (min-width: 1200px) {
.grid-container {
    display: grid;
    max-width:100%;
    grid-template-areas:
    'header menu menu menu'
    'info1 info1 info1 info1'
    'info2 info2 info3 info3'
    'info4 info4 info5 info5'
    'info6 info6 info7 info7'
    'info8 info8 info8 info8'
    'footer footer footer footer';
    grid-gap: var(--main-grid-gap);
    grid-border-radius: var(--main-grid-border-radius);
    background-color: var(--main-bodybkgrnd-color);
}
}



h1 {
  text-size: 18px;
  padding: 5px;
  text-align: center;
}

h2 {
  text-size: 12px;
  padding: 5px;
  text-align: center;
}

h3 {
  text-size: 10px;
  padding: 5px;
  text-align: center;
}

/* --------------------------------------- */
/* Info background                         */
/* --------------------------------------- */
.vbs_bgd {
    display: grid;
}

.vbs_bgd div {
    height: 220px;
    background-size: cover;
    background-attachment: fixed;
}


/* --------------------------------------- */
/* Info 1                                  */
/* --------------------------------------- */
.info1 {
  grid-area: info1;
  text-align: left;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background-color: tan;
}

.info1 img {
  max-width: 450px; 
  width: 40%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 85%;}
}

.info1 video {
  width: 80%;
  max-width: 750px; 
  max-width: 550px;
  display: inline-block;
  @media (max-width: 600px) { max-width: 250px;}
}

/* --------------------------------------- */
/* Info 2                                  */
/* --------------------------------------- */
.info2 {
  grid-area: info2;
  text-align: left;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: lightblue;
}

/* --------------------------------------- */
/* Info 3                                  */
/* --------------------------------------- */
.info3 {
  grid-area: info3;
  text-align: left;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: lightblue;
}

/* --------------------------------------- */
/* Info 4                                  */
/* --------------------------------------- */
.info4 {
  grid-area: info4;
  background-color: lightblue;
  text-align: left;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: lightblue;
}


/* --------------------------------------- */
/* Info 5                                  */
/* --------------------------------------- */
.info5 {
  grid-area: info5;
  background-color: lightblue;
  text-align: left;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: lightblue;
}


/* --------------------------------------- */
/* Info 6                                  */
/* --------------------------------------- */
.info6 {
  grid-area: info6;
  background-color: lightblue;
  text-align: left;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: lightblue;
}

/* --------------------------------------- */
/* Info 7                                  */
/* --------------------------------------- */
.info7 {
  grid-area: info7;
  background-color: lightblue;
  text-align: left;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: lightblue;
}


/* --------------------------------------- */
/* Info 8                                  */
/* --------------------------------------- */
.info8 {
  grid-area: info8;
  text-align: center;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: white;
}