Sidebar animation is not triggered when loading page

public/main.css

@@ -53,8 +53,6 @@ body {
       margin: 0; } }
 
 @media (max-width: 650px) {
-  .LP-Wrapper__Site {
-    grid-template-columns: 0 1fr; }
   @keyframes slide_out_siedebar {
     from {
       left: -250px; }
@@ -65,6 +63,8 @@ body {
       left: 0; }
     to {
       left: -250px; } }
+  .LP-Wrapper__Site {
+    grid-template-columns: 0 1fr; }
   .LP-Main__Sidebar {
     grid-area: unset;
     width: 250px;
@@ -74,6 +74,8 @@ body {
     height: 100vh;
     top: 60px;
     border-right: 1px solid #C09F80; }
+    .LP-Main__Sidebar--hidden {
+      visibility: hidden; }
   #toggle_sidebar:checked ~ .LP-Main__Sidebar {
     animation-name: slide_out_siedebar;
     animation-duration: .3s;