/* ---------------------------------------
---------- EXPLORE STYLES ---------------- */



/* ---- ARTICLE ---- */

article {
  margin-bottom: 100px;
}



/* ---- BLUE-CONTENT ---- */

.blue-content h2 {
  color: white;
}

.blue-content {
  width: 80vw;
  margin: 50px auto;
  z-index: 10;
}



/* ---- FOR TEACHERS ---- */

.for-teachers {
  background-color: var(--primary-color);
  width: 100%;
  color: white;
  padding-top: 30px;
  margin-bottom: 80px;
}

.teacher-image {
  width: 300px;
  height: 420px;
  border-radius: 4px;
  margin-bottom: 50px;
  margin-top: 16px;
}

.cta-contact {
  margin-top: 50px;
  margin-bottom: 100px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}



/* ---- MEDIA TABLET ---- */

@media only screen and (min-width: 768px) and (max-width: 999px) {
  header,
  article,
  main h2,
  .blue-content {
    width: 60vw;
  }

  .content-image {
    width: 100%;
    height: 100%;
  }

  article {
    padding-bottom: 10vh;
  }

  .blue-content {
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  
  .teacher-image {
    margin: 16px auto 50px !important;
    width: 100%;
    object-fit: cover;
  }
}



/* ---- MEDIA DESKTOP SMALL < ---- */

@media screen and (min-device-width: 1200px) {
  article,
  .teacher-grid-container {
    padding-bottom: 5vh;
  }

  .for-kids-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5vw;
    height: auto;
  }

  .left-kids,
  .mid-kids,
  .right-kids {
    height: auto;
  }

  .content-image {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    object-fit: cover;
    width: 100%;
    margin: 0px;
    height: auto;
  }

  .for-kids p {
    height: 15vh;
  }

  .teacher-grid-container {
    display: grid;
    grid-template-areas:
      "left mid-1 right"
      "left mid-2 right"
      "left mid-3 right"
      "left mid-4 right";
    margin-top: 25px;
    padding-bottom: 100px;
    grid-auto-rows: auto;
    column-gap: 5vw;
  }

  .cta-contact {
    margin-top: 0px;
    margin-bottom: 20px;
  }

  .left-image { grid-area: left; }
  .right-image { grid-area: right; }
  .mid-text-1 { grid-area: mid-1; }
  .mid-text-2 { grid-area: mid-2; }
  .mid-text-3 { grid-area: mid-3; }
  .mid-text-4 {
    grid-area: mid-4;
    bottom: -40px !important;
  }

  .mid-text {
    width: 25vw;
    margin: 12px auto;
    position: relative;
  }

  .teacher-image {
    margin: 0px auto !important;
    width: 100%;
    object-fit: cover;
  }

  .researchers-grid-container {
    margin-top: 25px;
    display: grid;
    grid-template-areas: "1fr 1fr";
    gap: 20vw;
    grid-auto-rows: auto;
  }

  .researchers section,
  p {
    margin-top: 0px;
  }

  .researchers p {
    height: 10vh;
  }

  .researchers img {
    margin-top: 20px;
  }

  .left-r,
  .right-r {
    height: auto;
  }

  .blue-content {
    margin: 0px auto;
  }
}



/* ---- MEDIA DESKTOP LARGE < ---- */

@media screen and (min-device-width: 1600px) {
  header,
  article,
  main h2,
  .blue-content {
    /* width: 70vw; */
    width: 80vw;
  }
  .researchers p {
    /* height: 5vh; */
  }
  .for-kids p {
    /* height: 9vh; */
  }
  .for-teachers {
    padding: 0;
    height: 100vh;
    font-size: 20px;
    margin-bottom: 10vh!important;
  }
  .blue-content {
    padding-top: 2vh;
  }
  h1 {
    font-size: 3rem;
    margin-top: 10vh;
    margin-bottom: 10vh;
  }
  h2 {
    font-size: 2.5rem;
    padding-bottom: 5vh;
    padding-top: 5vh;
  }
  .teacher-grid-container {
    height: 70vh;
  }
  .teacher-image {
    height: 100%;
  }
  .cta-contact {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .mid-text-4 {
    bottom: -60px !important;
  }
  .for-kids, .researchers {
    padding: 0;
    height: 60vh;
    font-size: 20px;
    margin: 0 auto;
  }
  .for-kids p {
    height: 11vh;
  }
  .researchers p {
    height: 7vh;
  }
}