refactor: Use flexbox gap (#520)

assets/scss/partials/layout/list.scss

@@ -3,21 +3,16 @@
     background-color: var(--card-background);
     padding: var(--small-card-padding);
     box-shadow: var(--shadow-l1);
-    margin-bottom: var(--section-separation);
     display: flex;
     align-items: center;
+    gap: 20px;
 
     --separation: 15px;
 
     .section-term {
         font-size: 2.2rem;
         margin: 0;
-        margin-top: calc(var(--separation) / 2);
         color: var(--card-text-color-main);
-
-        & + .section-description {
-            margin-top: var(--separation);
-        }
     }
 
     .section-description {
@@ -29,7 +24,9 @@
 
     .section-details {
         flex-grow: 1;
-        margin-right: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
     }
 
     .section-image {
@@ -49,7 +46,6 @@
 }
 
 .subsection-list {
-    margin-bottom: var(--section-separation);
     overflow-x: auto;
 
     .article-list--tile {