@media (max-width:768px){

  .outer{
    width: 95vw;
    margin: auto;
    padding: 5px 0;
  }

  /* .layout{
    display:block;
  } */

  .menu-toggle{
    display:block;
  }

  .banner{
    grid-template-columns: 25% 1fr 20%;
  }

  .banner-img{
    width: 100%;
    max-width: 100px;
    height: auto;
  }

  .banner-text{
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    align-self: end;
  }

  .nav-container{
    position:fixed;
    top:0;
    left:0;
    width:240px;

    transform:translateX(-100%);
    transition:transform .3s ease;
    padding-top:70px;
  }

  .nav a{
    padding:1rem;
  }

  .nav-container.open{
    transform:translateX(0);
  }

  .layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-items: start;
  }

  main,
  .right-side,
  .left-side {
    grid-column: 1;
    grid-row: auto;
  }

  main {
    grid-row: 1;
  }

  .right-side{
    grid-row: 2;
  }

  #index-video{
    width: 50%;
    height: auto;
    justify-self: center;
  }
}