/* rem and em do NOT depend on html font-size in media queries! 
Instead, 1rem = 1em = 16px */

/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 96
*/

/* BREAK DESIGN 992px (Tabler portrait) */
@media (max-width: 62em) {
  html {
    /* 9px / 16px */
    font-size: 56.25%;
  }
}

/* BREAK DESIGN 768px */
@media (max-width: 48em) {
  h1 {
    font-size: 3rem;
  }

  .testimonial-text {
    font-size: 2rem;
  }

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

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

  aside {
    display: none;
  }
}

/* BREAK DESIGN 576 */
@media (max-width: 36em) {
  .header img {
    display: none;
  }
  
  .header {
    grid-template-columns: 1fr;
  }

  .main-title {
    font-size: 2.2rem;
  }

  .mark {
    font-size: 8rem;
    position: absolute;
    top: -1rem;
    right: 2rem;
  }

  .testimonial {
    padding: 5rem 3rem 2rem 3rem;
  }
  
  .testimonial-text {
    font-size: 1.8rem;
  }

  .testimonial-box-job {
    font-size: 1.2rem;
  }

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

  .grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
  }
}