/* LG - SMALL LAPTOP: 1024px - 1280px */

@media (max-width: 72rem) {
  /* 1150px / 16px = 72rem */

  html {
    font-size: 56.25%;
    /* 9px / 16px = 56.25% */
  }

  .features-grid-container {
    column-gap: 2rem;
  }

  .cta-section {
    margin-bottom: 20rem;
  }
}

/* MD - TABLETS: 768px - 1024px */

@media (max-width: 51rem) {
  /* 815px / 16px = 51rem */

  html {
    font-size: 50%;
    /* 8px / 16px = 50% */
  }
}

/* SM - PHONE LANDSCAPE: 576px - 768px */

@media (max-width: 43rem) {
  /* 680px / 16px = 43rem */

  html {
    font-size: 43.75%;
    /* 7px / 16px = 43.75% */
  }

  .cta-card {
    padding: 8rem 16rem;
  }

  .features-section {
    margin-bottom: 20rem;
  }

  .features-grid-container {
    row-gap: 5rem;
    column-gap: 0.5rem;
  }
}

/* XS - PHONE POTRAITE:  < 576px */

@media (max-width: 34rem) {
  /* 530px / 16px = 34rem */

  html {
    font-size: 37.5%;
    /* 6px / 16px = 37.5% */
  }

  .hero-section-break {
    display: none;
  }

  .hero-section {
    height: auto;
  }

  .features-grid-container {
    grid-template-columns: 1fr;
  }

  .feature-img-swap-order {
    grid-row: auto;
    grid-column: auto;
  }

  .cta-card {
    padding: 8rem 6rem;
  }
}