.about-us-section {
  background-color: $text-light;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  padding-block: 8.75rem;
  height: fit-content;
  min-height: fit-content;
  gap: 1.25rem;
  scroll-margin-top: 3rem;

  .about-us-panel {
    place-self: center end;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 4rem;
    box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
    padding-inline: 4.75rem;
    padding-top: 3.44rem;
    padding-bottom: 3.81rem;
    width: calc(100% - 12.81rem);
    text-align: center;

    h2 {
      color: $primary;
      text-align: center;
      font-size: 4.4375rem;
      font-weight: 900;
      letter-spacing: 0.08875rem;
      margin-bottom: 3.25rem;
    }

    p {
      text-align: center;
      font-size: 1.25rem;
      font-synthesis-weight: 600;
      line-height: 1.6;
    }
  }

  .mission-vision {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    width: calc(100% - 12.81rem);

    .mission-statement,
    .vision-statement {
      display: grid;
      grid-template-columns: 1fr;
      place-items: center;
      h3 {
        color: $primary;
        text-align: center;
        font-size: 3.75rem;
        font-weight: 500;
        letter-spacing: 0.075rem;
        margin-bottom: 3rem;
      }
      p {
        text-align: center;
        font-size: 1.25rem;
        line-height: 1.6;
        font-style: normal;
        font-weight: 400;
        width: calc(10 / 12 * 100%);
      }
    }
    .mission-statement {
      margin-bottom: 1.81rem;
    }
  }
}

@media screen and (max-width: 1024px) {
  .about-us-section {
    padding-block: 6rem;
    .about-us-panel {
      width: calc(100% - 6rem);
      padding-inline: 3rem;
    }
    .mission-vision {
      width: calc(100% - 6rem);
      .mission-statement,
      .vision-statement {
        h3 {
          margin-bottom: 1rem;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .about-us-section {
    padding-block: 3rem;
    .about-us-panel {
      width: calc(100% - 3rem);
      padding-inline: 1.5rem;
    }
    .mission-vision {
      width: calc(100% - 3rem);
    }
  }
}

@media screen and (max-width: 480px) {
  .about-us-section {
    grid-template-columns: repeat(1, 1fr);
    padding-inline: 2rem;
    padding-block: 4rem;
    height: fit-content;

    .about-us-panel {
      place-self: center;
      width: 100%;
      padding-inline: 2rem;

      h2 {
        font-size: 3rem;
      }
    }

    .mission-vision {
      width: 100%;
      place-self: center;

      .mission-statement,
      .vision-statement {
        h3 {
          margin-bottom: 1rem;
          font-size: 2.5rem;
        }
      }
    }
  }
}
