Styling elements.

frontend/src/app/pages/publication/publication.component.scss

@@ -78,18 +78,22 @@ $cardBorderRadius: .5em;
 
         footer {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             justify-content: space-between;
             align-items: center;
             background-color: #f0f0f0;
             border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
             padding: 1em 2em;
+            gap: 1em;
+
+            @media screen and (min-width: 500px) {
+                flex-direction: row;
+            }
 
             .metadata {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                
                 gap: 1em;
     
                 img {
@@ -100,9 +104,16 @@ $cardBorderRadius: .5em;
                     object-fit: cover;
                 }
     
-                .publication-date {
-                    font-style: italic;
-                    color: #bdbdbd;
+                .posting-data {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: start;
+
+                    .publication-date {
+                        font-style: italic;
+                        color: #bdbdbd;
+                    }
                 }
             }
 
@@ -120,7 +131,7 @@ $cardBorderRadius: .5em;
                 gap: .5em;
             
                 &:hover {
-                    background-color: #B71C1C;
+                    background-color: #E53935;
                     cursor: pointer;
                 }
             }