refactor: Use flexbox gap (#520)

assets/scss/partials/layout/archives.scss

@@ -1,3 +0,0 @@
-.archives-group {
-    margin-bottom: var(--section-separation);
-}

assets/scss/partials/layout/article.scss

@@ -13,10 +13,6 @@
         box-shadow: var(--shadow-l1);
         overflow: hidden;
 
-        &.main-article {
-            margin-bottom: var(--section-separation);
-        }
-
         .article-header {
             .article-image {
                 img {
@@ -57,11 +53,11 @@
                 display: flex;
                 align-items: center;
                 font-size: 1.4rem;
+                gap: 15px;
 
                 svg {
                     width: 20px;
                     height: 20px;
-                    margin-right: 15px;
                     stroke-width: 1.33;
                 }
             }
@@ -211,10 +207,6 @@
     }
 }
 
-.related-contents--wrapper {
-    margin-bottom: var(--section-separation);
-}
-
 .related-contents {
     overflow-x: auto;
     padding-bottom: 15px;
@@ -305,13 +297,10 @@
         flex-direction: row;
         justify-content: center;
         margin: 1.5em 0;
+        gap: 10px;
 
         figure {
             margin: 0;
-
-            & + figure {
-                margin-left: 10px;
-            }
         }
     }
 

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 {

assets/scss/partials/layout/search.scss

@@ -1,5 +1,4 @@
 .search-form {
-    margin-bottom: var(--section-separation);
     position: relative;
     --button-size: 80px;