Add Card and Card Grid components

src/components/Card.astro

@@ -0,0 +1,56 @@
+---
+const {
+    Title,
+    Description,
+    CallToAction,
+    CallToAction_Primary_Text,
+    CallToAction_Primary_Link,
+    CallToAction_Secondary_Text,
+    CallToAction_Secondary_Link
+} = Astro.props
+---
+
+<div class="card">
+    <slot/>
+    <h2>{Title}</h2>
+    <p>{Description}</p>
+    {CallToAction ?
+        <div class="call-to-actions">
+            <a class="call-to-action" href={CallToAction_Primary_Link}>{CallToAction_Primary_Text}</a>
+            <a class="call-to-action" href={CallToAction_Secondary_Link}>{CallToAction_Secondary_Text}</a>
+        </div>
+        :
+        null
+    }
+</div>
+
+<style lang="scss">
+.card {
+    background: rgba(29, 29, 29, 0.5);
+    border: 1px rgb(33, 33, 33) solid;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 24px;
+    h2 {
+        margin: 0px;
+    }
+    p {
+        margin: 0px;
+    }
+    .call-to-actions {
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 6px;
+        margin: 12px 0px -6px 0px;
+        a {
+            text-decoration: none;
+            background: rgb(29, 29, 29);
+            border: 1px rgb(33, 33, 33) solid;
+            border-radius: 3rem;
+            padding: 6px 12px;
+        }
+    }
+}
+</style>

src/components/CardGrid.astro

@@ -0,0 +1,16 @@
+<div class="card-grid">
+    <slot/>
+</div>
+
+<style lang="scss">
+.card-grid {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+@media only screen and (max-width: 700px) {
+    .card-grid {
+        flex-wrap: wrap;
+    }
+}
+</style>