/* This sets up youngadults webpage layout */


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

.grid-container {
   display: grid;
   max-width:100%;
   grid-template-areas:
    'header'
    'menu'
    'info1'
    'info2'
    'info3'
    'info6'
    'info5'
    'info4'
    '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 info1 info1 info1 info1'
    'info2 info2 info2 info3 info3 info3'
    'info6 info6 info6 info6 info6 info6'
    'info5 info5 info5 info5 info5 info5'
    'info4 info4 info4 info4 info4 info4'
    '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'
     'info6 info6 info6 info6'
     'info5 info5 info5 info5'
     'info4 info4 info4 info4'
     '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 info2 info3 info3 info3'
     'info6 info6 info6 info6 info6 info6'
     'info5 info5 info5 info5 info5 info5'
     'info4 info4 info4 info4 info4 info4'
     '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;
}


.youngadult_pics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: var(--main-grid-gap);
    justify-content: center;
    align-items: center;
}


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


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

.info1 img {
  max-width: 550px; 
  display: inline-block;
  @media (max-width: 500px) { max-width: 250px;}
}

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

/* --------------------------------------- */
/* Info 2                                  */
/* --------------------------------------- */
.info2 {
  grid-area: info2;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to right, white, 80%, pink);
}

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

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


/* --------------------------------------- */
/* Info 3                                  */
/* --------------------------------------- */
.info3 {
  grid-area: info3;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to right, maroon, 80%, tan);
}

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

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


/* --------------------------------------- */
/* Info 4                                  */
/* --------------------------------------- */
.info4 {
  grid-area: info4;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: tan;
  background: linear-gradient(to top, tan, 20%, white);
}

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


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


/* --------------------------------------- */
/* Info 5                                  */
/* --------------------------------------- */
.info5 {
  grid-area: info5;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to right, maroon, 80%, tan);
  background: white;
}

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


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


/* --------------------------------------- */
/* Info 6                                  */
/* --------------------------------------- */
.info6 {
  grid-area: info6;
  text-align: center;
  padding: 15px;
  border: var(--main-grid-border);
  border-radius: var(--main-grid-border-radius);
  background: linear-gradient(to top, white, 80%, tan);
}

.info6 img {
  max-width: 80%; 
  display: inline-block;
  @media (max-width: 600px) { max-width: 95%;}
}


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