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

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
}

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

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

  .header {
    padding: 0 3.2rem;
  }
}

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

@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }
  .live-price-table {
    width: 80%;
  }
}

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

@media (max-width: 44em) {
  .live-price-table {
    width: 87%;
  }
}

/**************************/
/* BELOW 600px (Large Phones) */
/**************************/

@media (max-width: 37.5em) {
  .page-nav {
    position: static;
    transform: none;
    margin-bottom: 10px;
  }
  .live-price-table {
    width: 95%;
    font-size: 2rem;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  .live-price-table {
    width: 100%;
    font-size: 1.8rem;
  }
  .footer-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
  }
  .logo-col {
    justify-self: center;
  }
  .contacts-col {
    justify-self: center;
  }
  .address-col {
    order: -1;
    grid-column: span 2;
  }
  .logo-col {
    justify-self: center;
  }
  .contacts-col {
    justify-self: center;
  }

  .footer {
    height: 29.5rem;
  }
  main {
    padding-bottom: 29.5rem; /* Footer height */
  }
}