/*-----------------------------------*\
  #ABOUT PAGE HEADER
\*-----------------------------------*/

.page-header {
  background: url(../assets/graduate7.avif) center center/cover;
}

/*-----------------------------------*\
  #ABOUT 
\*-----------------------------------*/

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  padding: 3rem 0;
  margin-bottom: 5rem;
}

.about-image {
  height: 30rem;
  border-radius: 7rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 0 var(--color-gray-100);
  transition: var(--transition);
}

.about-image:hover {
  box-shadow: none;
}

.about-story h2 span {
  color: var(--color-primary);
}

.about-story p {
  margin-top: 1rem;
}

/*-----------------------------------*\
  #INSTRUCTORS 
\*-----------------------------------*/

.instructors {
  background: var(--color-gray-0);
  padding: 8rem 0;
}

.instructors h2,
.instructors p {
  text-align: center;
}

.instructors p {
  margin-top: 1rem;
}

.instructor-list {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 5rem;
}

.instructor {
  background: var(--color-gray-0);
  border-radius: var(--radius-6);
  overflow: hidden;
  text-align: center;
  box-shadow: 0 1rem 0 var(--color-gray-100);
  transition: var(--transition);
}

.instructor:hover {
  box-shadow: 0 -1rem 0 var(--color-gray-100);
}

.instructor-image {
  height: 17rem;
  overflow: hidden;
  border-radius: 3rem;
}

.instructor h4 {
  margin: 1.5rem 0 0.6rem;
}

.instructor p {
  padding-bottom: 2rem;
}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/* ----------------- MEDIA QUERIES (medium screens) ----------------- */

@media (max-width: 991px) {

    /* about */
  .about-container {
    grid-template-columns: 1fr;
    gap: 6rem;
  }
}

/* ----------------- MEDIA QUERIES (small screens) ----------------- */

@media screen and (max-width: 600px) {

  /* about */

  .about-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-image {
    border-radius: var(--radius-6);
    box-shadow: none;
  }

  /* instructors */

  .instructor-list {
    gap: 2.4rem;
    width: 80%;
    margin-inline: auto;
  }
}