/* -------------------
    BELOW 1344px (SMALLER DESKTOPS)
   ------------------- */

/* 80em = 1280px */
@media (max-width: 80em) {
  html {
    font-size: 56.25%;
  }
}

/* 72.5em = 1160px */
@media (max-width: 72.5em) {
  html {
    font-size: 53.12%;
  }
}

/* 68em = 1088px */
@media (max-width: 68em) {
  html {
    font-size: 51.87%;
  }

  .heading-primary {
    font-size: 7.2rem;
  }

  span {
    font-size: 5.8rem;
  }

  .hero-description {
    font-size: 2rem;
    margin-right: 20rem;
  }

  .benefit-icon {
    width: 10rem;
    height: 10rem;
  }

  .grid--2-cols {
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem;
  }
}

/* 58em = 928px */
@media (max-width: 58em) {
  html {
    font-size: 50%;
  }

  .section--services {
    padding: 19.2rem 6.6rem 9.6rem 6.6rem;
  }

  .grid--6-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }

  .grid--2-cols {
    grid-template-columns: 1fr;
  }
}

/* 55em = 880px */
@media (max-width: 55em) {
  .section--services {
    padding: 19.2rem 4.8rem 9.6rem 4.8rem;
  }

  .heading-primary {
    font-size: 6.6rem;
  }

  span {
    font-size: 4.8rem;
  }

  .hero-description {
    margin: 0;
  }

  .heading-secondary {
    font-size: 4rem;
  }

  .container {
    max-width: 100rem;
  }
}

/* -------------------
    BELOW 672px (SMALLER TABLETS)
   ------------------- */

/* 42em = 672px */
@media (max-width: 42em) {
  .heading-primary {
    font-size: 5.4rem;
  }

  span {
    font-size: 3.6rem;
  }

  .hero-description {
    font-size: 1.8rem;
  }
}

/* 38em = 608px */

/* 528 45 */
/* 472 40 */
/* 416 35 */