Cacher is the code snippet organizer for pro developers

.rwd {
  width: 100%;
}
@media (min-width: 600px) {
  .rwd {
    width: 80%;
  }
}

@media (min-width: 800px) {
  nav {
    border-right: 1px solid purple;
  }
}
@media (min-width: 800px) {
  nav li {
    display: block;
  }
}

h1.hero {
  font-size: 2em;
}
@media (min-width: height) and (min-width: 777px) and (max-width: 999px) and (orientation: landscape) {
  h1.hero {
    font-size: 3em;
  }
}
@media (min-width: 1000px) {
  h1.hero {
    font-size: 4em;
  }
}

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// ----

@import "breakpoint";
//$breakpoint-to-ems:true;
$small:600px;
$horizontal-nav:800px;

.rwd{
  width:100%;
  @include breakpoint($small){
    width:80%;
  }
}

nav{
  @include breakpoint($horizontal-nav){
  border-right: 1px solid purple;
}

  li{
    @include breakpoint($horizontal-nav){
      display:block;
    }
    }
    
} 
  
  $medium-text:height (777px 999px)(orientation landscape);
  $tall-text:1000px;
  
h1.hero{
  font-size:2em;
  @include breakpoint($medium-text){
   font-size:3em; 
  }
  @include breakpoint($tall-text){
    font-size:4em;
  }
  
}