Added gap between sliders

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">
+	<section class="slider">
-		<Slider v-if="item.albums.length" :title="item.genre.name">
+		<template v-for="item in data" :key="item.genre._id">
-			<AlbumCard
+			<Slider v-if="item.albums.length" :title="item.genre.name">
-				v-for="album in item.albums"
+				<AlbumCard
-				:key="album._id"
+					v-for="album in item.albums"
-				:name="album.name"
+					:key="album._id"
-				:file="`${BACKEND_SERVE}${album.file}`"
+					:name="album.name"
-				:artists="album.artists"
+					:file="`${BACKEND_SERVE}${album.file}`"
-				:_id="album._id"
+					:artists="album.artists"
-			/>
+					:_id="album._id"
-		</Slider>
+				/>
-	</template>
+			</Slider>
+		</template>
+	</section>
 </template>
+
+<style lang="scss" scoped>
+.slider {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+</style>