update styling

components/MiniTechTalkCard.module.css

@@ -1,11 +1,10 @@
 .card {
   display: flex;
   flex-direction: row;
-  max-width: calc(800rem / 16);
   box-sizing: border-box;
   padding: calc(16rem / 16);
   color: var(--purple-2);
-  font-size: calc(14rem / 16);
+  font-size: 1rem;
 }
 
 .card aside {
@@ -27,8 +26,8 @@
 }
 
 .content h1 {
-  margin-block-start: 4px;
   margin: 0;
+  margin-top: calc(4rem / 16);
   font-size: calc(18rem / 16);
 }
 

components/TechTalkCard.module.css

@@ -1,9 +1,7 @@
 .card {
   display: flex;
   flex-direction: row;
-  max-width: calc(800rem / 16);
   box-sizing: border-box;
-  padding: calc(24rem / 16);
 }
 
 .card aside {
@@ -31,10 +29,6 @@
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
-    display: flex;
     flex-direction: column;
-    max-width: calc(1200rem / 16);
-    box-sizing: border-box;
-    padding: calc(24rem / 16);
   }
 }

components/TechTalkCard.tsx

@@ -11,16 +11,14 @@ interface TechTalkProps {
 
 export function TechTalkCard({ name, poster, children }: TechTalkProps) {
   return (
-    <article>
+    <article className={styles.card}>
-      <section className={styles.card}>
+      <aside>
-        <aside>
+        {poster && <Image alt={name} src={poster} />}
-          {poster && <Image alt={name} src={poster} />}
+        {!poster && <div className={styles.spacer}></div>}
-          {!poster && <div className={styles.spacer}></div>}
+      </aside>
-        </aside>
+      <section className={styles.content}>
-        <section className={styles.content}>
+        <h1>{name}</h1>
-          <h1>{name}</h1>
+        <div>{children}</div>
-          <div>{children}</div>
-        </section>
       </section>
     </article>
   );