/* This sets up whoweare 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'
    'info9'
    'info10'
    'info11'
    'info12'
    'info13'
    'info14'
    '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'
    'info1'
    'info2'
    'info3'
    'info4'
    'info5'
    'info6'
    'info7'
    'info8'
    'info9'
    'info10'
    'info11'
    'info12'
    'info13'
    'info14'
    '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 menu menu'
    'info1 info1 info1 info1 info1 info1'
    'info2 info2 info2 info3 info3 info3'
    'info4 info4 info4 info5 info5 info5'
    'info6 info6 info6 info7 info7 info7'
    'info8 info8 info8 info9 info9 info9'
    'info10 info10 info10 info11 info11 info11'
    'info12 info12 info12 info13 info13 info13'
    'info14 info14 info14 info14 info14 info14'
    '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: 1200px) {
.grid-container {
    display: grid;
    max-width:100%;
    grid-template-areas:
    'header menu menu menu menu menu'
    'info1 info1 info1 info1 info1 info1'
    'info2 info2 info3 info3 info4 info4'
    'info5 info5 info6 info6 info7 info7'
    'info8 info8 info9 info9 info10 info10'
    'info11 info11 info12 info12 info13 info13'
    'info14 info14 info14 info14 info14 info14'
    '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);
}
}


h1 {
  margin-bottom: 7px;
  text-align: center;
}

h2 {
  margin-bottom: 7px;
  text-align: center;
}

h3 {
  margin-bottom: 7px;
  text-align: center;
}

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

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

.info1 > p {
  margin-bottom: 7px;
  align-items:center;
}

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

.info2 > img {
  max-width: 600px; 
  width: 90%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info2 > p {
  margin-bottom: 7px;
  align-items: center;
}


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

.info3 > img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info3 > p {
  margin-bottom: 7px;
  align-items: center;
  vertical-align: middle;
}

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

.info4 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info4 p {
  margin-bottom: 7px;
  align-items: center;
}

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

.info5 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info5 p {
  margin-bottom: 7px;
  align-items: center;
}

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

.info6 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info6 p {
  margin-bottom: 7px;
  align-items: center;
}

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

.info7 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info7 p {
  margin-bottom: 7px;
  align-items: center;
}

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

.info8 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info8 p {
  margin-bottom: 7px;
  align-items: center;
}
/* --------------------------------------- */
/* Info 9                                  */
/* --------------------------------------- */
.info9 {
  grid-area: info9;
  text-align: center;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: pink;
}

.info9 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info9 p {
  margin-bottom: 7px;
  align-items: center;
}

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

.info10 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info10 p {
  margin-bottom: 7px;
  align-items: center;
}

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

.info11 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info11 p {
  margin-bottom: 7px;
  align-items: center;
}

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

.info12 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info12 p {
  margin-bottom: 7px;
}

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

.info13 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info13 p {
  margin-bottom: 7px;
  align-items: center;
}


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

.info14 img {
  max-width: 350px; 
  width: 50%;
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

.info14 p {
  margin-bottom: 7px;
  align-items: center;
}