/*in media query, 1 rem is not 10 pixel like we declared.But it follow browser default setting*/
/*   in media query, recommended use em not rem/px    */

@media (max-width: 88em) {
  .hero {
    max-width: 120rem;
    gap: 8rem;
    padding: 0 5.2rem;
  }

@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }
  .hero-webapps {
    max-width: 120rem;
  }
  .header {
    padding: 0 3.2rem;
  }
}

/***********************/
/* BELOW 1200px (Landscape Tablets) */
/***********************/

/*   calculation from px to em = 1200/16(default font size)    */
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
  .hero {
    max-width: 120rem;
    gap: 8rem;
    padding: 0 2.2rem;
  }

  .header {
    padding: 0 3.2rem;
  }
}

/***********************/
/* BELOW 900px (Tablets) */
/***********************/

@media (max-width: 56em) {
  html {
    /* 8px/16 = 0.5 */
    font-size: 56.25%;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 0 8rem;
  }
  .hero-webapps {
    grid-template-columns: 1fr;
    padding: 0 8rem;
  }
  .gap-hero-button {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
  }

  .hero-text-box,
  .hero-img-box {
    text-align: center;
  }
  .hero-text-box-webapps {
    text-align: center;
  }
  .hero-img {
    width: 60%;
  }
  .hero-img-1 {
    width: 60%;
    padding-top: 3rem;
  }
  .delivered-meals {
    justify-content: center;
  }
  .meal-content {
    padding: 2.4rem 3.2rem 3.2rem 3.2rem;
  }
}

/***********************/
/* BELOW 900px (Smaller Tablets) */
/***********************/
@media (max-width: 44em) {
  .grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .meal-diets {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 0 26%;
  }
}

/***********************/
/* BELOW 889px (Tablets) */
/***********************/

/*   calculation from px to em = 1200/16(default font size)    */
@media (max-width: 55.6em) {
  .hero-img {
    width: 100%;
  }
}

/***********************/
/* BELOW 544px (Phone) */
/***********************/
@media (max-width: 33em) {
  html {
    font-size: 50%;
  }

  .helper-subheading-meals {
    margin: 0 auto;
    padding: 0 3.2rem 0 7rem;
  }
  .grid--2-cols {
    grid-template-columns: 1fr;
  }
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
  .meal-diets {
    padding: 0;
  }
  .step-img-box:nth-child(2) {
    grid-row: 1;
  }
  .step-img-box:nth-child(6) {
    grid-row: 5;
  }
  .hero {
    padding: 0 2rem;
  }
  .hero-webapps {
    padding: 0 4.4rem 0 2rem;
  }
  .hero-text-box-webapps {
    padding-left: 5%;
  }
}

/***********************/
/* BELOW 370 (Phone) */
/***********************/
@media (max-width: 24.1em) {
  html {
    font-size: 45%;
  }
  .gap-hero-button {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .helper-subheading-meals {
    margin: 0 auto;
    padding: 0 3.2rem 0 7rem;
  }
  .grid--2-cols {
    grid-template-columns: 1fr;
  }
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
  .meal-diets {
    padding: 0;
  }
  .step-img-box:nth-child(2) {
    grid-row: 1;
  }
  .step-img-box:nth-child(6) {
    grid-row: 5;
  }
  .hero {
    padding: 0 2rem;
  }
  .hero-webapps {
    padding: 0 4.4rem 0 2rem;
  }
  .hero-text-box-webapps {
    padding-left: 5%;
  }
}