COMPLETED: Card sub-components

TODO: fixed styles for :active state

app/page.tsx

@@ -20,7 +20,7 @@ export default function Page() {
                     padding: '8px',
                 }}
             >
-                <div style={{ display: 'flex', gap: '8px', maxWidth: 512 }}>
+                <div style={{ display: 'flex', gap: '8px', maxWidth: 1024 }}>
                     <Card variant={'outlined'}>
                         <CardHeader>
                             <h1>Header</h1>
@@ -50,6 +50,61 @@ export default function Page() {
                             <Button>label</Button>
                         </CardFooter>
                     </Card>
+                    <Card variant={'elevated'}>
+                        <CardMedia src={testImage1.src} type={'img'} />
+                        <CardActionArea>
+                            <CardBody>
+                                <h4>
+                                    <strong>Sub-header</strong>
+                                </h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consecrate
+                                    adipiscing elit, sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.
+                                    Ut enim ad minim veniam, quis nostrud
+                                    exercitation ullamco laboris nisi ut aliquip
+                                    ex ea commodo consequat. Duis aute irure
+                                    dolor in reprehenderit in voluptate velit
+                                    esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat cupidatat non
+                                    proident, sunt in culpa qui officia deserunt
+                                    mollit anim id est laborum.
+                                </p>
+                            </CardBody>
+                        </CardActionArea>
+                        <CardFooter>
+                            <Button>label</Button>
+                        </CardFooter>
+                    </Card>
+                    <Card variant={'elevated'}>
+                        <CardHeader>
+                            <h1>Header</h1>
+                        </CardHeader>
+                        <CardMedia src={testImage1.src} type={'img'} />
+                        <CardActionArea>
+                            <CardBody>
+                                <h4>
+                                    <strong>Sub-header</strong>
+                                </h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consecrate
+                                    adipiscing elit, sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.
+                                    Ut enim ad minim veniam, quis nostrud
+                                    exercitation ullamco laboris nisi ut aliquip
+                                    ex ea commodo consequat. Duis aute irure
+                                    dolor in reprehenderit in voluptate velit
+                                    esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat cupidatat non
+                                    proident, sunt in culpa qui officia deserunt
+                                    mollit anim id est laborum.
+                                </p>
+                            </CardBody>
+                        </CardActionArea>
+                        <CardFooter>
+                            <Button>label</Button>
+                        </CardFooter>
+                    </Card>
                 </div>
             </div>
         </main>

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 {