@media (max-width:48rem){
  /*HEADER*/
  .site-header{
    height:80px;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--color-red);
  }
  .site-nav.is-open{
    display:block;
  }
  .site-nav ul{
    display:grid;
    gap:.25em;
    padding-bottom:var(--gutter-mob);
  }
  .site-nav ul li{
    padding:.5em 0;
  }
  .site-nav a,
  .site-nav a:hover,
  .site-nav a.nav-pill,
  .site-nav a.nav-pill:hover{
    border:0;
  }
  .site-nav a.nav-pill,
  .site-nav a.nav-pill:hover{
    background:transparent;
  }
  /*MENU*/
  .menu-toggle{
    background:transparent;
    border:0;
    display:grid;
    gap:5px;
    padding:.5em
  }
  .menu-toggle span:not(.visually-hidden){
    background:var(--color-white);
    border-radius:999px;
    height:3px;
    width:1.75em;
  }
  /*CONTENT*/
  .container{
    padding:var(--gutter-mob);
    max-width:var(--container-mob);
  }
  .hero {
    
  }
  .hero__kicker {
    font-size: 1.25em;
  }
/*
.site-nav{
  background:linear-gradient(180deg,var(--color-blue),var(--color-red));
  border-top:1px solid rgb(255 255 255 /.25);
  display:none;
  left:0;
  padding:var(--space-2) var(--gutter);
  position:absolute;
  top:100%;
  width:100%;
  z-index:var(--z-menu)
}
.site-nav.is-open{
  display:block
}
.site-nav ul{
  display:grid;
  gap:.25rem;
  list-style:none;
  padding:0
}
.site-nav a{
  color:var(--color-white);
  display:block;
  font-size:.82rem;
  font-weight:900;
  padding:.75rem 0;
  text-transform:uppercase
}
.site-nav a:hover{
  color:#d6efff
}
*/
}