* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: "Montserrat";
}

.text-27 {
  font-size: 1.6875rem;
}

.text-21 {
  font-size: 1.3125rem;
}

.text-18 {
  font-size: 1.125rem;
}

.text-15 {
  font-size: 0.9375rem;
}

.text-12 {
  font-size: 0.75rem;
}

.text-13 {
  font-size: 0.8125rem;
}

.text-14 {
  font-size: 0.875rem;
}

.fw-700 {
  font-weight: 700;
}

.fw-600 {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}

.fw-300 {
  font-weight: 300;
}

.w-full {
  width: 100%;
}

.d-flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.self-center {
  justify-self: center;
}

.self-end {
  justify-self: end;
}

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-20 {
  margin-top: 5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: 12rem;
}

.oif-logo {
  width: 406px;
}

.mission-change {
  background-image: url("assets/images/Black\ with\ Shapes.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: center;
  padding-block: 5rem;
  padding-inline: 10rem;
  color: white;
}

.mission-change-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mission-change-paragraph {
  margin-top: 0.5rem;
}

.students-working {
  width: 100%;
}

.oif-staff-quotes {
  padding-block: 5rem;
  padding-inline: 13rem;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.melissa-clark {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
}

.michele-gill {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
}

.opportunity-gap {
  display: grid;
  grid-template-columns: 2fr 4fr;
  gap: 2rem;
  padding-block: 5rem;
  padding-inline: 10rem;
}

.gary-container {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
  padding-inline: 10rem;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.gary-conroy {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
}

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background-color: #231f20;
  padding: 0.5rem 2rem;
  color: #ffff;
}

footer a {
  text-decoration: none;
  color: #ffff;
}

/* ========== TABLET ========== */
@media (max-width: 1024px) {
  html {
    font-size: 14px;
  }

  header {
    padding-block: 6rem;
  }

  .mission-change,
  .opportunity-gap {
    grid-template-columns: 1fr;
    padding-inline: 4rem;
    text-align: center;
  }

  .mission-change-content {
    align-items: center;
  }

  .oif-staff-quotes {
    padding-inline: 4rem;
    grid-template-columns: 1fr;
  }

  .melissa-clark,
  .michele-gill {
    grid-template-columns: 1fr;
    text-align: center;
    grid-column: span1;
  }

  .michele-gill .michele-gill-image,
  .gary-conroy .gary-conroy-img {
    order: 1;
  }

  .michele-gill > p,
  .gary-conroy > p {
    order: 2;
  }

  .gary-container {
    padding-inline: 4rem;
    grid-template-columns: 1fr;
  }

  .gary-conroy {
    grid-template-columns: 1fr;
    text-align: center;
  }

  main img {
    max-width: 250px;
  }

  .md-mx-auto {
    margin-inline: auto;
  }

  .self-center-md {
    justify-self: center;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }

  footer div {
    justify-content: center;
  }
}

/* ========== PHONE ========== */
@media (max-width: 767px) {
  html {
    font-size: 12px;
  }

  header {
    padding-block: 4rem;
    padding-inline: 1rem;
    text-align: center;
  }

  .oif-logo {
    width: 250px;
  }

  .mission-change,
  .opportunity-gap {
    padding-inline: 1.5rem;
    gap: 1.5rem;
  }

  .oif-staff-quotes {
    padding-inline: 1.5rem;
  }

  .melissa-clark p,
  .michele-gill p,
  .gary-conroy p {
    text-align: center;
  }

  footer {
    padding: 1rem;
  }

  footer img {
    width: 24px;
    height: 24px;
  }
}