/* This sets up deafs webpage layout */


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

.grid-container {
   display: grid;
   max-width:100%;
   grid-template-areas:
    'header'
    'menu'
    'info1'
    'info4'
    'info2'
    'info3'
    'footer';
    margin: 0px;
    grid-gap: var(--main-grid-gap);
    /*background-color: red */
}

@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 info1 info1 .'
    '. info4 info4 info4 info4 .'
    '. info2 info2 info2 info2 .'
    '. info3 info3 info3 info3 .'
    'footer footer footer footer footer footer';
    margin: 0px;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--main-grid-gap);
    /* background-color: yellow */
}
}


@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 . .'
    '. . info4 info4 . .'
    '. info2 info2 info3 info3 .'
    'footer footer footer footer footer footer';
    margin: 0px;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--main-grid-gap);
    /*background-color: red */
}
}


@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 . .'
    '. . info4 info4 . .'
    '. info2 info2 info3 info3 .'
    'footer footer footer footer footer footer';
    margin: 0px;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--main-grid-gap);
    /* background-color: black; */
}
}


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

.info1 h3 {
  margin-bottom: 0px;
  text-align: 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-color: LightSalmon;
}

.info3 h3 {
  margin-bottom: 7px;
  text-align: 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-color: Moccasin;
}

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

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


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

.info4 img {
  max-width: 430px; 
  display: inline-block;
  @media (max-width: 500px) { max-width: 320px;}
}

.deaf_pics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.deaf_pics img {
  max-width: 300px; 
  display: inline-block;
  @media (max-width: 500px) { max-width: 95%;}
}

@media only screen and (min-width: 500px) {
.deaf_pics img:hover {
  transform: scale(2); 
  transition: transform 0.3s ease-in-out; 
}
}