Card container components for a cleaner dashboard

src/components/Dashboard/Dashboard.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
 
 import Card from "@/components/Card/Card";
+import {
+    CardColumn,
+    CardRow,
+} from "@/components/CardContainers/CardContainers";
 import CardHeader from "@/components/CardHeader/CardHeader";
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
@@ -38,23 +42,24 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <div className={style.cardWrapper}>
+            <CardColumn>
                 <Card>
                     <CardHeader icon="🚊" content="Timetable" />
                     <Timetable />
                 </Card>
-                <div className={style.clockAndWeather}>
-                    <div className={style.small}>
-                        <Card>
-                            <CardHeader icon="🕐" content="Clock" />
-                            <Datetime />
-                        </Card>
-                    </div>
+
+                <CardRow>
                     <Card>
-                        <CardHeader icon="🌤️" content="Weather" />
+                        <CardHeader icon="🕐" content="Clock" />
+                        <Datetime />
+                    </Card>
+
+                    <Card>
+                        <CardHeader icon="🌤" content="Weather" />
                         <Weather />
                     </Card>
-                </div>
+                </CardRow>
+
                 <Card>
                     <CardHeader icon="🔔" content="Terminal" active={true} />
                     <Terminal />
@@ -64,10 +69,9 @@ export default function Dashboard() {
                     <CardHeader icon="🧹" content="Flatastic" />
                     <Flatastic />
                 </Card>
-            </div>
-            <div className={style.footer}>
-                <Footer />
-            </div>
+            </CardColumn>
+
+            <Footer />
         </div>
     );
 }