Mobile-First Media Query

responsive.scss

/*
1em = 16px
Souce from Jonas Schmedtmann, Advanced CSS and Sass: Flexbox, Grid, Animations and More!
https://www.udemy.com/advanced-css-and-sass/learn/v4/overview
*/
@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 37.5em) { @content }; //600px
  }
  @if $breakpoint == tab-port {
    @media (max-width: 56.25em) { @content }; //900px
  }
  @if $breakpoint == tab-land {
    @media (max-width: 75em) { @content }; //1200px
  }
  @if $breakpoint == big-desktop {
    @media (min-width: 112.5em) { @content }; //1800px
  }
}