ADDED: Card sub-components

TODO: Complete styles for card sub-components and section button

src/styles/card.sass

@@ -1,8 +1,28 @@
 @import 'mixins/m3-mixins'
 
-div.m3.m3-card-action-area
+$padding: 16px
+
+.m3:not(:first-child):is(.m3-card)
+    padding: $padding
+
+:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body).m3
+    padding: $padding
+    display: block
+    box-sizing: border-box
+
+.m3.m3-card-media
+    &.m3-rounded
+        border-radius: 12px
+
     width: 100%
     height: 100%
+    display: block
+    contain: content
+    position: relative
+    box-sizing: border-box
+
+div.m3.m3-card-action-area
+    display: block
     cursor: pointer
     contain: content
     position: relative
@@ -10,9 +30,12 @@ div.m3.m3-card-action-area
     transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
 
     & > div.m3.m3-card-action-area-content
-        position: absolute
+        top: 0
+        width: 100%
+        position: relative
 
-    & > span.m3.m3-card-state-layer
+    & > span.m3:is(.m3-card-state-layer, .m3-ripple-domain)
+        top: 0
         width: 100%
         height: 100%
         position: absolute