Handle responsiveness

media_object/media.css

@@ -1,10 +1,10 @@
 .media {
   display: grid;
   grid-template-areas: 
-    "title decoration"
-    "body body"
-    "footer footer";
-  grid-template-columns: 4fr 1fr;
+    "decoration"
+    "title"
+    "body"
+    "footer";
   background-color: var(--media-background);
   border: solid 1px var(--media-background-border);
 
@@ -12,6 +12,16 @@
   padding: 0.5em;
 }
 
+@media only screen and (min-width: 768px) {
+  .media {
+    grid-template-areas: 
+      "title decoration"
+      "body body"
+      "footer footer";
+    grid-template-columns: 4fr 1fr;
+  }
+}
+
 .media__title {
   grid-area: title;
   margin-top: 0.3em;
@@ -22,10 +32,17 @@
   display: flex;
   flex-direction: column;
   list-style: none;
+  justify-self: end;
 
   margin-top: 0.3em;
 }
 
+@media only screen and (min-width: 768px) {
+  .media__decoration {
+    justify-self: inherit;
+  }
+}
+
 .media__body {
   grid-area: body;
   display: flex;