add hover animation to event item

web/src/components/events/eventItem.module.scss

@@ -10,6 +10,12 @@
     .details {
       font-size: var(--font-size-body);
     }
+
+    .text {
+      &:before {
+        display: none;
+      }
+    }
   }
 
   &.medium {
@@ -37,6 +43,9 @@
 
     .text {
       align-self: start;
+      &:before {
+        display: none;
+      }
     }
 
     .time {
@@ -54,6 +63,7 @@
 
   &.large {
     align-content: start;
+    margin-bottom: 1rem;
 
     .image {
       order: 1;
@@ -68,6 +78,16 @@
       order: 3;
     }
   }
+
+  &:hover {
+    opacity: 1;
+    .text {
+      &:before {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .image {
@@ -84,6 +104,29 @@
   }
 }
 
+.text {
+  --size-icon: var(--font-size-caption);
+  padding-right: 2rem;
+  position: relative;
+
+  &:before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: var(--size-icon);
+    height: var(--size-icon);
+    margin-right: var(--spacing-xs);
+    border-radius: var(--size-icon);
+    background: var(--color-goldenOrange);
+    position: absolute;
+    right: 0;
+    top: calc(var(--font-size-h3)/2.5);
+    transform: translateX(-.5rem);
+    opacity: 0;
+    transition: transform .4s ease, opacity .2s ease;;
+  }
+}
+
 .title {
   font-size: var(--font-size-h3);
 }