diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index cd368d9..a46325a 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -9,65 +9,161 @@ body.kind-page {
     padding: 0;
     margin: 0;
     width: 100%;
+
+    .content-section {
+      flex: 80%;
+      order: 2;
+      /* background-color: lightseagreen; */
+      padding: 0;
+      position: relative;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+
+      .content {
+        padding: 0;
+        position: relative;
+        padding-top: 2rem;
+        min-height: 130vh;
+
+        .post-card-holder {
+          margin-top: 32px;
+          margin-left: auto;
+          padding: 0;
+          display: flex;
+          flex-flow: wrap;
+        }
+
+        .paginator {
+          width: -moz-fit-content;
+          width: fit-content;
+          margin: auto;
+
+          .pagination {
+            margin-left: auto;
+            margin-right: auto;
+            margin-top: 0.5rem;
+            margin-bottom: 0.5rem;
+            width: -moz-fit-content;
+            width: fit-content;
+          }
+
+          .page-item {
+            & > a {
+              color: #248aaa;
+            }
+
+            &.active > a {
+              background-color: #248aaa;
+              color: #f9fafc;
+            }
+          }
+        }
+      }
+    }
   }
 
-  .content-section {
-    flex: 80%;
-    order: 2;
-    /* background-color: lightseagreen; */
-    padding: 0;
-    position: relative;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+  @include media('<medium') {
+    .post-card {
+      margin-left: 1%;
+      margin-right: 1%;
+      width: 98%;
+    }
+    .wrapper {
+      padding-left: 0px;
+      padding-right: 0px;
+      flex-flow: column;
+      overflow: hidden;
+
+      .content-section {
+        flex: 100%;
+        max-width: 100%;
+        padding-left: 0;
+        width: 100%;
+
+        .content {
+          width: 100%;
+          padding-left: 0;
+          padding-right: 0;
+          transition: all ease-out 0.3s;
+        }
+
+        &.hide {
+          .content {
+            margin-top: 0;
+            padding-top: 0;
+            transition: all ease-out 0.3s;
+          }
+          .post-card-holder {
+            margin-top: 0.5rem;
+            transition: all ease-out 0.3s;
+          }
+        }
+      }
+    }
   }
 
-  .content {
-    padding: 0;
-    position: relative;
-    padding-top: 2rem;
-    min-height: 130vh;
+  @include media('>=medium', '<large') {
+    .post-card {
+      width: calc(100% / 2);
+    }
+    .content-section.hide {
+      .post-card {
+        width: 100%;
+      }
+    }
   }
 
-  .post-card-holder {
-    margin-top: 32px;
-    margin-left: auto;
-    padding: 0;
-    display: flex;
-    flex-flow: wrap;
+  @include media('>=large', '<very-large') {
+    .post-card {
+      width: calc(100% / 3);
+    }
+    .wrapper {
+      padding-left: 0px;
+      padding-right: 0px;
+
+      .content-section {
+        padding: 0;
+        flex: 60%;
+        order: 2;
+        padding-bottom: 0.5rem;
+
+        .content {
+          overflow: hidden;
+
+          .post-card-holder {
+            margin: 0;
+            margin-top: 1.5rem;
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            position: relative;
+            transition: all ease-out 0.3s;
+          }
+        }
+        .container {
+          max-width: 100%;
+        }
+        &.hide {
+          .post-card {
+            width: calc(100% / 2);
+          }
+        }
+      }
+    }
   }
 
-  .paginator {
-    width: -moz-fit-content;
-    width: fit-content;
-    margin: auto;
+  @include media('>=very-large', '<extra-large') {
+    .post-card {
+      width: calc(100% / 4);
+    }
+    .post-card-holder {
+      margin-left: 0px;
+    }
   }
 
-  .paginator .page-item > a {
-    color: #248aaa;
-  }
-
-  .paginator .page-item.active > a {
-    background-color: #248aaa;
-    color: #f9fafc;
-  }
-
-  .navbar-toggler {
-    display: none;
-  }
-
-  .pagination {
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  /* ============= Device specific fixes ======= */
-
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
+  @include media('>=extra-large') {
+    .post-card {
+      width: calc(100% / 5);
+    }
     .content-section {
       padding-left: 1rem;
       padding-right: 1rem;
@@ -75,117 +171,4 @@ body.kind-page {
       max-width: 85%;
     }
   }
-
-  /* Extra large devices (large desktops, 1200px and up) */
-
-  @media (max-width: 1400px) {
-    .post-card-holder {
-      margin-left: 0px;
-    }
-  }
-
-  @media (max-width: 1200px) {
-  }
-
-  /* IPad Pro */
-  @media (max-width: 1024px) {
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-    }
-    .content-section {
-      padding: 0;
-      flex: 60%;
-      order: 2;
-      padding-bottom: 0.5rem;
-    }
-
-    .content {
-      overflow: hidden;
-    }
-    .container {
-      max-width: 100%;
-    }
-    .navbar-toggler {
-      display: block;
-    }
-
-    .navbar-collapse.lang-selector {
-      display: block !important;
-      position: absolute;
-      right: 0;
-      top: 0.5rem;
-    }
-
-    .post-card-holder {
-      margin: 0;
-      margin-top: 1.5rem;
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-      position: relative;
-      transition: all ease-out 0.3s;
-    }
-  }
-
-  /* Small devices (landscape phones, 576px and up) */
-
-  @media only screen and (max-width: 576px) {
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-      flex-flow: column;
-      overflow: hidden;
-    }
-    .content-section {
-      flex: 100%;
-      max-width: 100%;
-      padding-left: 0;
-      width: 100%;
-    }
-
-    .content {
-      width: 100%;
-      padding-left: 0;
-      padding-right: 0;
-      transition: all ease-out 0.3s;
-    }
-
-    .content-section.hide .content {
-      margin-top: 0;
-      padding-top: 0;
-      transition: all ease-out 0.3s;
-    }
-
-    .content-section.hide .post-card-holder {
-      margin-top: 0.5rem;
-      transition: all ease-out 0.3s;
-    }
-  }
-  @include media('<medium') {
-    .post-card {
-      margin-left: 1%;
-      margin-right: 1%;
-      width: 98%;
-    }
-  }
-  @include media('>=medium', '<large') {
-    .post-card {
-      width: calc(100% / 2);
-    }
-  }
-  @include media('>=large', '<very-large') {
-    .post-card {
-      width: calc(100% / 3);
-    }
-  }
-  @include media('>=very-large', '<extra-large') {
-    .post-card {
-      width: calc(100% / 4);
-    }
-  }
-  @include media('>=extra-large') {
-    .post-card {
-      width: calc(100% / 5);
-    }
-  }
 }