fully responsive event page and components

src/components/Event/Event.module.css

@@ -1,10 +1,24 @@
 .eventContainer {
     display: flex;
+    flex-direction: column;
     margin: 1rem 0;
-    justify-content: space-between;
     width: 80%;
 }
 
+.eventContainerTop {
+    display: flex;
+}
+
+.eventContainerBottom{
+    display: flex;
+    align-items: center;
+    justify-content: end;
+}
+
+.moreLink {
+    width: fit-content;
+}
+
 .eventImageDiv {
     display: flex;
     align-items: center;
@@ -25,7 +39,6 @@
 
 .eventContent {
     display: flex;
-    flex-direction: column;
 }
 
 .eventTitle {
@@ -89,3 +102,34 @@
 .eventMenuClose {
     display: none;
 }
+
+
+
+
+
+@media screen and (max-width: 768px) {
+    .eventImage {
+        width: 100%;
+        height: auto;
+        display: block;
+        object-fit: cover;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .eventContainer{
+        padding: 0;
+    }
+
+    .eventImageDiv {
+        margin: 0;
+    }
+
+    .eventContent {
+        flex-direction: column;
+    }
+
+    .eventInfos, .eventContainerBottom {
+        padding: 10px;
+    }
+}