@media(prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(page-content){
    animation-duration: 1s;
    animation-timing-function: ease;
  }

  ::view-transition-old(page-content) {
    animation-name: slide-out;
  }

  ::view-transition-new(page-content) {
    animation-name: slide-in;
  }

  .sliding-content {
    view-transition-name: page-content;
  }

  @keyframes slide-out{
    to {
      translate: -100vw;
    }
  }

  @keyframes slide-in{
    from {
      translate: 100vw;
    }
  }
}