@media(max-width:760px){
  .site-header{
    height:64px
  }
  .menu-toggle{
    display:block
  }
  nav{
    display:none;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:var(--surface);
    padding:1rem 5vw;
    box-shadow:var(--shadow);
    align-items:stretch;
    flex-direction:column;
    gap:.7rem
  }
  nav.open{
    display:flex
  }
  .nav-tools .submenu{
    position:static;
    width:auto;
    box-shadow:none;
    margin-top:.4rem
  }
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:4rem
  }
  .hero-art{
    height:220px
  }
  .tools-grid,.three,.split,.contact-grid{
    grid-template-columns:1fr
  }
  .converter-grid{
    grid-template-columns:1fr
  }
  .convert-btn{
    width:100%
  }
  .pane textarea{
    height:240px
  }
  footer{
    grid-template-columns:1fr 1fr
  }
  .copyright{
    grid-column:1/-1
  }
  .hero-art span{
    font-size:3.5rem
  }
  .hero-art i{
    font-size:3rem
  }
}
@media(max-width:430px){
  footer{
    grid-template-columns:1fr
  }
  .copyright{
    grid-column:auto
  }
  .actions .button{
    width:100%;
    text-align:center
  }
}