Adjust styling for card container so ordering is consistent

components/card/style.module.css

@@ -9,6 +9,22 @@
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 }
 
+:global(.cardContainer) .card {
+  width: calc(100% / 3 - 10%);
+}
+
+@media (max-width: 1000px) {
+  :global(.cardContainer) .card {
+    width: calc(100% / 2 - 10%);
+  }
+}
+
+@media (max-width: 600px) {
+  :global(.cardContainer) .card{
+    width: calc(100% / 1 - 10%);
+  }
+}
+
 .card:last-child {
   /* Fixes the odd flickering bug */
   margin-bottom:0px;

styles/layout.css

@@ -69,7 +69,9 @@ main p.warning button.buttonLink {
   padding-right: 50px;
 
   max-width:2000px;
-  column-count: 3;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 button.buttonLink {
@@ -97,16 +99,9 @@ button.buttonLink:focus {
   }
 }
 
-@media (max-width: 1000px) {
-  .cardContainer {
-    column-count: 2;
-  }
-}
-
 @media (max-width: 600px) {
   .cardContainer {
     margin-top: 20px;
-    column-count: 1;
   }
 }