Nice style for media object

media_object/media.css

@@ -1,21 +1,29 @@
 .media {
   display: grid;
   grid-template-areas: 
-    "title badges"
+    "title decoration"
     "body body"
     "footer footer";
   grid-template-columns: 4fr 1fr;
   background-color: var(--media-background);
+  border: solid 1px var(--media-background-border);
+
+  border-radius: 5px;
+  padding: 0.5em;
 }
 
 .media__title {
   grid-area: title;
+  margin-top: 0.3em;
 }
 
-.media__badges {
-  grid-area: badges;
-  align-self: flex-end;
-  padding-right: 0.5em;
+.media__decoration {
+  grid-area: decoration;
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+
+  margin-top: 0.3em;
 }
 
 .media__body {
@@ -23,13 +31,25 @@
   display: flex;
 }
 
+.media__text {
+  margin: 0 0.5em;
+}
+
 .media__footer {
   grid-area: footer;
+  margin-bottom: 0.3em;
+
+  font-size: 90%;
+  font-style: italic
+}
+.media__footer--right {
+  text-align: right;
 }
 
 .media:hover {
   background-color: var(--media-background-highlight);
 }
-.media--embedded:hover {
-  background-color: transparent;
+
+.media--embedded {
+  background-color: var(--media-background-embedded);
 }

media_object/media.html

@@ -15,7 +15,47 @@
   <div class="show-case">
     <div class="media">
       <h1 class="media__title">The title</h1>
-      <p class="media__badges">Badges</p>
+      <p class="media__decoration">Decoration</p>
+      <div class="media__body">
+        <p class="media__text">
+          voluptatem est hic nam ea qui consequuntur maiores necessitatibus aut cum sit quae
+          quia aspernatur ea enim aut pariatur illo
+        </p>
+      </div>
+      <p class="media__footer media__footer--right">Footer stuff</p>
+    </div>
+  </div>
+
+  <div class="show-case">
+    <div class="media">
+      <h1 class="media__title">The embedding media</h1>
+      <p class="media__decoration">Decoration</p>
+      <div class="media__body">
+        <div class="media media--embedded">
+          <h1 class="media__title">The embedded media</h1>
+          <p class="media__decoration">The embedded decoration</p>
+          <div class="media__body">
+            <p class="media__text">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
+              Molestiae libero qui earum aliquam architecto doloribus labore 
+              magnam corrupti, suscipit ea quisquam at nam consequatur, error quibusdam repellendus ipsam placeat dolores!
+            </p>
+          </div>
+          <p class="media__footer">The embedded footer</p>
+        </div>
+      </div>
+      <p class="media__footer">Footer stuff</p>
+    </div>
+  </div>
+
+  <div class="show-case">
+    <div class="media">
+      <h1 class="media__title">The embedding media with a longer title than expected</h1>
+      <ul class="media__decoration">
+        <li>Stuff</li>
+        <li>Other stuff</li>
+        <li>Other long long stuff</li>
+      </ul>
       <div class="media__body">
         <p class="media__text">
           voluptatem est hic nam ea qui consequuntur maiores necessitatibus aut cum sit quae

media_object/style.css

@@ -1,8 +1,10 @@
 @import 'media.css';
 
 :root {
-  --media-background: rgb(255, 225, 94);
-  --media-background-highlight: rgb(255, 217, 45);
+  --media-background: rgb(255, 219, 60);
+  --media-background-highlight: rgb(255, 214, 31);
+  --media-background-border: #aaa;
+  --media-background-embedded: rgb(255, 227, 103);
 }
 
 /* Add nodebug class to any parent field (e.g. body) to turn off coloring */