sass inline media quieries

// mobile first inline media quieries with breakpoints as variables

$medium-breakpoint: 20rem;
$large-breakpoint: 30rem;

p {
  font-size: 1rem;

  @media ( min-width: $medium-breakpoint ) {
    font-size: 1.2rem;
  }

  @media ( min-width: $large-breakpoint ) {
    font-size: 1.4rem;
  }
}

h1 {
  font-size: 3rem;

  @media ( min-width: $medium-breakpoint ) {
    font-size: 4rem;
  }

  @media ( min-width: $large-breakpoint ) {
    font-size: 6rem;
  }
}