/* rem and em do not depend on html font size in media queries. Instead 1rem=1em=16px */

/*********************************************************************/
/* BELOW 1360px (Smaller Desktops) */
/*********************************************************************/

@media (max-width: 85em) {
  /* In this the rem responds to the html font size */

  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 75em) {
  html {
    /* 9/16*100 = 56.25% */
    font-size: 56.25%;
  }

  .grid {
    row-gap: 4.8rem;
    column-gap: 2.4rem;
  }
}

/*********************************************************************/
/* BELOW 944px (Portrait Tablets) */
/*********************************************************************/

@media (max-width: 59em) {
  html {
    font-size: 50%;
  }
}

/*********************************************************************/
/* BELOW 704px (Smaller Tablets) */
/*********************************************************************/

@media (max-width: 44em) {
  html {
    font-size: 43.75%;
  }
}

/*********************************************************************/
/* BELOW 560px (Phones) */
/*********************************************************************/

@media (max-width: 35em) {
  .heading-primary {
    font-size: 4.4rem;
    margin-right: 1.2rem;
  }

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

  .travel-img-box:nth-child(4) {
    grid-row: 3;
  }

  .food-place {
    grid-template-columns: 1fr;
  }
}