/* == MEDIA QUERIES == */

@media (min-width: 30em) {}

@media (min-width: 48em) {

  header.scroll-up,
  header:focus-within {
    top: 0;
  }

  header.scroll-down {
    top: 0;

    & .logo {
      visibility: visible;
    }
  }

  .nav-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "logo . nav nav";
  }

  .f-nav-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "logo logo nav nav";
  }

  .nav-list,
  .f-nav-list {
    justify-content: end;
    gap: 5rem;
  }

  .logo,
  .copyright {
    justify-self: left;
    padding: 1em;
    margin: 0;
  }

  .background-img {
    height: 100vh;
  }

  .hero-content-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "hero-heading hero-heading ."
      "hero-paragraph hero-paragraph ."
      "hero-btn . .";
    align-content: center;
  }

  .hero-paragraph {
    margin-bottom: 2.5em;
  }

  .about-img {
    display: block;
    float: left;
    clear: both;
    width: 30%;
    min-width: 25%;
    max-width: 35%;
    margin-top: 0.25em;
    padding-bottom: 1em;
    padding-right: 2em;
  }

  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      ". contact-heading ."
      ". contact-blurb .";
  }

  .services-grid-home {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      ". services-heading ."
      "expertise-card safety-card certification-card";
  }

  .services-grid-page {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "sidebar-grid services-content services-content";
  }

  .dropdown-content {
    top: 3em;
  }
}

@media (min-width: 68.0625em) {

  .full-height {
    height: 90vh
  }

  .section-heading {
    margin-top: 1em;
  }

  .nav-grid {
    grid-template-columns: 0.43fr 0.475fr repeat(3, 1fr) 0.447fr;
    grid-template-areas: ". logo . nav nav .";
  }

  .f-nav-grid {
    grid-template-columns: 0.43fr 0.475fr repeat(3, 1fr) 0.447fr;
    grid-template-areas: ". logo logo nav nav .";
  }

  .logo,
  .copyright {
    padding: 1em 0;
  }

  .hero-content-grid {
    grid-template-columns: 0.45fr repeat(4, 1fr) 0.45fr;
    grid-template-areas:
      ". hero-heading hero-heading . . ."
      ". hero-paragraph hero-paragraph . . ."
      ". hero-btn . . . .";
  }

  .about-grid {
    grid-template-columns: 0.45fr 1fr 0.45fr;
    grid-template-areas:
      ". about-heading ."
      ". about-content .";
  }

  .services-grid-home {
    grid-template-columns: 0.45fr repeat(3, 1fr) 0.45fr;
    grid-template-areas:
      ". . services-heading . ."
      ". expertise-card safety-card certification-card .";
  }

  .services-grid-page {
    grid-template-columns: 0.45fr 0.5fr 0.1fr 1fr 1fr 0.45fr;
    grid-template-areas:
      ". sidebar-grid . services-content services-content .";
  }
}

@media (min-width: 75em) {}