From 73ac39e22ec839aadfb8821c09b53b0773d4fb43 Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Thu, 21 Sep 2023 09:34:50 +0300
Subject: [PATCH] Use figcaption in EventView.svelte

---
 src/lib/EventView.svelte | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/lib/EventView.svelte b/src/lib/EventView.svelte
index 27b48c5..0ced978 100644
--- a/src/lib/EventView.svelte
+++ b/src/lib/EventView.svelte
@@ -5,11 +5,11 @@
 </script>
 
 <div class="container">
-	<div class="image-title-container">
-		<div class="image-container">
+	<div class="image-container">
+		<figure>
 			<img src="{env.PUBLIC_SERVER_URL + event.image.url}" alt="{event.image.alt}" loading="lazy"/>
-		</div>
-		<p>{event.image.alt}</p>
+			<figcaption>{event.image.alt}</figcaption>
+		</figure>
 	</div>
 	<div class="text">
 		<h2>{event.title}</h2>
@@ -32,12 +32,20 @@
 		justify-content: center;
 	}
 
-	.image-title-container {
-        display: flex;
-        margin-right: 3rem;
-		flex-direction: column;
+	.image-container figure figcaption {
+        font-family: 'Roboto', serif;
+        font-size: 18px;
+        line-height: 22px;
+		font-weight: 300;
+        color: #FFFFFF;
+        text-align: start;
+        overflow: auto;
 	}
 
+	.image-container figure {
+        margin: 0 3rem 0 0;
+    }
+
 	img {
 		max-width: 100%;
 		object-fit: contain;
@@ -91,5 +99,9 @@
 			order: -1;
 			gap: 0;
 		}
+
+        .image-container figure {
+            margin: 0;
+        }
     }
 </style>