/*--Big tablets to 1200px (widths smaller than 1200px)--*/

@media only screen and (max-width: 1200px) {
  html {
    font-size: 56.25%; /* 1rem = 9px; 9/16 = 56.25% */
  }

  .grey-container {
    margin: 7rem 10rem;
  }
}

/*--Small tablets to big tablets: from 768px to 1023px--*/

@media only screen and (max-width: 1023px) {
  html {
    font-size: 50%; /* 1rem = 8px; 8/16 = 50% */
  }

  body {
    padding: 0;
  }

  .medium-width {
    max-width: 70%;
  }

  .grey-container {
    margin: 5rem 5rem;
  }
  .heading-secondary {
    text-align: center;
  }
}

/*--Small Phones to small tablets: from 481px to 767px--*/

@media only screen and (max-width: 767px) {
}

/*--Small Phones: from 0px to 480px--*/

@media only screen and (max-width: 480px) {
  html {
    font-size: 44%; /* 1rem = 8px; 8/16 = 50% */
  }

  .medium-width {
    max-width: 85%;
  }
}