/* This sets up webpage layout */

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

.grid-container {
  display: grid;
  max-width:100%;
  grid-template-areas:
    'header header header header header header'
    'menu menu menu menu menu menu'
	'intro intro intro intro intro intro'
    'teach1 teach1 teach1 teach1 teach1 teach1'
    '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);
}

/* --------------------------------------- */
/* Intro                                   */
/* --------------------------------------- */

.ssintro {
  grid-area: intro;
  color: var(--main-text-color);
  text-align: center;
  font-size: var(--main-text-size);
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
}


/* --------------------------------------- */
/* teachers                                */
/* --------------------------------------- */

.teacher {
  grid-area: teach1;
  text-align: center;
  padding: 20px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background-color: tan;
}


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

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


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.item {
  text-align: center;
  background-color: #f1f1f1;
  width: 300px;
  height: 500px;
  margin: 20px;
  padding: 10px;
  /* line-height: 75px; */
  /* font-size: 30px; */
}

.item img {
  width: 270px;
  max-width: 270px;
  height: auto;
}

.item p {
  margin-top: 10px;
  font-size: 14px;
}


/* ---------------------------------------------------------------- */
/* Grid-area explanation                                            */
/* Entry 1=start row 2=start column 3= #of row(s) 4=# of column(s)  */
/* ---------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
  .hdr     {grid-area: 1 / 1 / span 1 / span 6;}
  .mnu     {grid-area: 2 / 1 / span 1 / span 6;}
  .ssintro {grid-area: 3 / 1 / span 1 / span 6;}
  .teach1  {grid-area: 4 / 1 / span 1 / span 6;}
  .ftr     {grid-area: 5 / 1 / span 1 / span 6;}
}



@media only screen and (min-width: 600px) {
  .hdr     {grid-area: 1 / 1 / span 1 / span 2;}
  .mnu     {grid-area: 1 / 3 / span 1 / span 4;}
  .ssintro {grid-area: 2 / 2 / span 1 / span 4;}
  .teach1  {grid-area: 3 / 1 / span 1 / span 6;}
  .ftr     {grid-area: 4 / 1 / span 1 / span 6;}
}


@media only screen and (min-width: 768px) {
  .hdr     {grid-area: 1 / 1 / span 1 / span 1;}
  .mnu     {grid-area: 1 / 2 / span 1 / span 5;}
  .ssintro {grid-area: 2 / 2 / span 1 / span 4;}
  .teach1  {grid-area: 3 / 1 / span 1 / span 6;}
  .ftr     {grid-area: 4 / 1 / span 1 / span 6;}
}