With full notes explaining the media queries management with mixins

_base.scss

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  // This defines what 1rem is
  // 1 rem = 10px
  //  10px/16px = 62.5%
  font-size: 62.5%;

  // Traditional way
  // @media (max-width: 600px) {
  //   font-size: 50%;
  // }

  // Better way
  // @include respond-phone {
  //   font-size: 50%;
  // }

  // Best way
  // Comment this out because the same query is defined for the tab-port
  // @include respond(phone) {
  //   font-size: 50%;
  // }

  @include respond(tab-port) {
    // Suppose we want 1rem = 8px, 8/16 = 50%
    font-size: 50%;
  }

  @include respond(tab-land) {
    // we want 1rem = 9px here, 9/16=.5625
    font-size: 56.25%;
  }

  @include respond(big-desktop) {
    // 1rem = 12px, 12/16=.75
    font-size: 75%;
  }
}

body {
  box-sizing: border-box;
}