COMPLETED: Card sub-components

TODO: fixed styles for :active state

src/styles/card.sass

@@ -2,20 +2,26 @@
 
 $padding: 16px
 
-.m3:not(:first-child):is(.m3-card)
-    padding: $padding
+@function padding-calculating($has-padding)
+    @if($has-padding == true)
+        @return $padding
+    @else
+        @return 0px
 
-:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body).m3
-    padding: $padding
+div.m3.m3-card > .m3-card-media:first-child
+    padding: padding-calculating(false)
+    border-radius: 12px !important
+
+:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, img.m3-card-media).m3
+    padding: padding-calculating(true)
     display: block
     box-sizing: border-box
 
 .m3.m3-card-media
     &.m3-rounded
-        border-radius: 12px
+        border-radius: 12px + padding-calculating(true)
 
     width: 100%
-    height: 100%
     display: block
     contain: content
     position: relative

src/styles/generics.css

@@ -3,11 +3,12 @@
 @import "./themes/typography.module.css";
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
-.m3:not(:first-child):is(.m3-card) {
-  padding: 16px;
+div.m3.m3-card > .m3-card-media:first-child {
+  padding: 0px;
+  border-radius: 12px !important;
 }
 
-:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body).m3 {
+:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, img.m3-card-media).m3 {
   padding: 16px;
   display: block;
   box-sizing: border-box;
@@ -15,14 +16,13 @@
 
 .m3.m3-card-media {
   width: 100%;
-  height: 100%;
   display: block;
   contain: content;
   position: relative;
   box-sizing: border-box;
 }
 .m3.m3-card-media.m3-rounded {
-  border-radius: 12px;
+  border-radius: 28px;
 }
 
 div.m3.m3-card-action-area {