@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 0.5s;
}

::view-transition-old(root) {
  animation: slide-out-to-left 0.5s forwards;
}

::view-transition-new(root){
    animation: slide-in-from-right 0.5s forwards;
}

@keyframes slide-out-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100);
  }
}

@keyframes slide-in-from-right{
    from{
        transform: translateX(100%);
    }
    to{
        transform: translateX(0);
    }
}

@media screen and (width < 600px) {
  @view-transition {
    navigation: none;
  } 
}