fix event page images & improve html semantics

src/views/ActualPage/ActualPageHero.tsx

@@ -49,7 +49,6 @@ const ActualPageHero: React.FC = () => (
         linkText="Yritysyhteistyö ›"
       />
       <HeroAsideItem
-        // TODO: Too long
         header="Uusia suhteita ulkopaikkakuntalaisten kanssa"
         link="#ulkosuhteet"
         linkText="Ulkoiset suhteet&nbsp;›"

src/views/EventPage/EventPageView.tsx

@@ -15,7 +15,6 @@ interface EventPageViewProps {
 }
 
 const StyledTextSection = styled(TextSection)`
-  margin: auto;
   align-items: center;
 
   & > h1 {
@@ -25,13 +24,16 @@ const StyledTextSection = styled(TextSection)`
     }
   }
 
-  time {
-    p {
+  & > div {
+    margin: auto;
+
+    & > p {
       font-size: 0.9rem;
       font-weight: bold;
       line-height: 0.4rem;
     }
   }
+
 `;
 
 const SignupButtons = styled.div`
@@ -58,18 +60,23 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
         <Image
           src={event.image || event.tags[0].icon}
           alt={event.title_fi}
+          objectFit="scale-down"
           layout="responsive"
-          width={0}
-          height={0}
+          width={16}
+          height={9}
         />
       </h1>
       <div>
         <Content source={event.content_fi} escapeHtml={false} />
-        <time>
-          <p>Paikka: {event.location_fi}</p>
-          <p>Alkaa: {date_start}</p>
-          <p>Päättyy: {date_end}</p>
-        </time>
+        <p>
+          Paikka: {event.location_fi}
+        </p>
+        <p>
+          <time>Alkaa: {date_start}</time>
+        </p>
+        <p>
+          <time>Päättyy: {date_end}</time>
+        </p>
         {/* We may have multiple signup forms. Generate own Button for each one */}
         <SignupButtons>
           {event.signupForm.map((sf) => (