From 4754d612792eefa0459ee97e34733198753f2142 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Wed, 25 Feb 2026 16:56:21 +0100
Subject: [PATCH] Added gap between sliders

---
 app/components/Album/Slider.vue | 34 +++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/app/components/Album/Slider.vue b/app/components/Album/Slider.vue
index bb92bba..47153ba 100644
--- a/app/components/Album/Slider.vue
+++ b/app/components/Album/Slider.vue
@@ -27,16 +27,26 @@ const { data, pending, refresh } = useAsyncData("random-albums", async () => {
 </script>
 
 <template>
-	<template v-for="item in data" :key="item.genre._id">
-		<Slider v-if="item.albums.length" :title="item.genre.name">
-			<AlbumCard
-				v-for="album in item.albums"
-				:key="album._id"
-				:name="album.name"
-				:file="`${BACKEND_SERVE}${album.file}`"
-				:artists="album.artists"
-				:_id="album._id"
-			/>
-		</Slider>
-	</template>
+	<section class="slider">
+		<template v-for="item in data" :key="item.genre._id">
+			<Slider v-if="item.albums.length" :title="item.genre.name">
+				<AlbumCard
+					v-for="album in item.albums"
+					:key="album._id"
+					:name="album.name"
+					:file="`${BACKEND_SERVE}${album.file}`"
+					:artists="album.artists"
+					:_id="album._id"
+				/>
+			</Slider>
+		</template>
+	</section>
 </template>
+
+<style lang="scss" scoped>
+.slider {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+</style>