diff --git a/src/style/components/ArticleCard.scss b/src/style/components/ArticleCard.scss
index a2f7527c..06094a57 100644
--- a/src/style/components/ArticleCard.scss
+++ b/src/style/components/ArticleCard.scss
@@ -1,10 +1,14 @@
+@import "../variables";
+
 .ArticleCard {
+  --article-card-width: 30%;
+  --article-card-margin: var(--single-margin) var(--half-margin);
+
   display: flex;
   flex-direction: column;
 
-  margin: var(--single-margin) var(--half-margin);
-
-  width: 30%;
+  margin: var(--article-card-margin);
+  width: var(--article-card-width);
   min-width: 15em;
   max-width: 30em;
 
@@ -70,3 +74,12 @@
   }
 }
 
+// Mobile
+
+@media (max-width: $mobile-width) {
+  .ArticleCard {
+    --article-card-width: 100%;
+    --article-card-margin: var(--single-margin) 0;
+  }
+}
+