refactor(article): use var(--content-side-padding) in more places

assets/scss/partials/article.scss

@@ -120,10 +120,6 @@
 }
 
 .article-tags {
-    & + .article-copyright {
-        margin-top: 30px;
-    }
-    
     a {
         color: var(--accent-color-text);
         background-color: var(--accent-color);

assets/scss/partials/layout/article.scss

@@ -1,5 +1,15 @@
 @import "variables.scss";
 
+:root {
+    --content-side-padding: 30px;
+    --blockquote-border-size: 4px;
+    --heading-border-size: 4px;
+
+    @media (max-width: $on-tablet) {
+        --content-side-padding: 20px;
+    }
+}
+
 .article-page {
     .left-sidebar {
         @media (max-width: $on-tablet) {
@@ -53,15 +63,13 @@
             }
 
             .article-details {
-                padding: 30px 30px 0 30px;
+                padding: var(--content-side-padding);
-                @media (max-width: $on-tablet) {
+                padding-bottom: 0;
-                    padding: 20px 20px 0 20px;
-                }
             }
         }
 
         .article-content {
-            margin: 30px 0;
+            margin: var(--content-side-padding) 0;
             line-height: 1.75;
             color: var(--card-text-color-main);
 
@@ -76,13 +84,10 @@
         }
 
         .article-footer {
-            padding: 30px;
+            padding: var(--content-side-padding);
-
-            @media (max-width: $on-phone) {
-                padding: 20px;
-            }
 
             .article-copyright {
+                margin-top: var(--content-side-padding);
                 color: var(--card-text-color-tertiary);
                 text-transform: uppercase;
                 display: flex;
@@ -202,14 +207,6 @@
 }
 
 .article-content {
-    --content-side-padding: 30px;
-    --blockquote-border-size: 4px;
-    --heading-border-size: 4px;
-
-    @media (max-width: $on-tablet) {
-        --content-side-padding: 20px;
-    }
-
     font-family: var(--article-font-family);
 
     p {