Improve styles

src/components/markdown/Album.astro

@@ -1,15 +0,0 @@
----
-interface Props {
-  album: {
-    title: string;
-    cover: string;
-    url: string;
-  }
-}
-
-const { album } = Astro.props;
----
-<a class="c-album" href={album.url}>
-  <img class="c-album__image" src={album.cover} alt=""/>
-  <div class="c-album__title">{album.title}</div>
-</a>

src/components/markdown/AlbumGrid.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  albums: Array<{
+    title: string;
+    cover: string;
+    url: string;
+  }>
+}
+
+const { albums } = Astro.props;
+---
+<section class="c-album-grid">
+  {albums.map(album => 
+    <a class="c-album-grid__item" href={album.url}>
+      <img class="c-album-grid__image" src={album.cover} alt=""/>
+      <div class="c-album-grid__title">{album.title}</div>
+    </a>
+  )}
+</section>

src/pages/songs/[circle].astro

@@ -1,6 +1,6 @@
 ---
 import Base from "@layouts/Base.astro";
-import Album from "@components/markdown/Album.astro";
+import Grid from "@components/markdown/AlbumGrid.astro";
 import Header from "@components/headers/Base.astro";
 import { CIRCLES } from "@utils/songs/data";
 
@@ -28,12 +28,10 @@ const items = Object.keys(albums)
 ---
 
 <Base>
-  <main>
-    <article>
+  <main class="l-songs-circle">
+    <article class="l-songs-circle__article">
       <Header title={CIRCLES[circle].name} />
-      <section class="l-album-grid">
-        {items.map(album => <Album album={album} />)}
-      </section>
+      <Grid albums={items} />
     </article>
   </main>
 </Base>

src/styles/components/_album-grid.scss

@@ -0,0 +1,26 @@
+.c-album-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  justify-content: center;
+
+  &__item {
+    padding: 0.5em;
+    background-color: white;
+    border-radius: 0.5em;
+    box-shadow: var(--shadow-l);
+    transition: box-shadow ease-in-out 0.2s;
+    text-decoration: none;
+  
+    &:hover {
+      box-shadow: var(--shadow-m);
+    }
+  }
+  &__image {
+    width: 12em;
+  }
+  &__title {
+    margin-top: 0.3em;
+    line-height: 1em;
+  }
+}

src/styles/components/_album.scss

@@ -1,16 +0,0 @@
-.c-album {
-  padding: 0.5em;
-  background-color: white;
-  border-radius: 0.5em;
-  box-shadow: var(--shadow-l);
-  transition: box-shadow ease-in-out 0.2s;
-  text-decoration: none;
-
-  &:hover {
-    box-shadow: var(--shadow-m);
-  }
-
-  &__image {
-    width: 16em;
-  }
-}

src/styles/layouts/_songs.scss

@@ -1,11 +1,9 @@
-.l-album-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2em;
+.l-songs-circle {
+  padding: 1.5em;
 
-  &__item img {
-    width: 20em;
-    height: 20em;
+  &__article {
+    max-width: 48em;
+    margin: 0 auto;
   }
 }
 

src/styles/styles.scss

@@ -11,7 +11,7 @@
 @use 'components/tab';
 @use 'components/lyrics';
 @use 'components/song';
-@use 'components/album';
+@use 'components/album-grid';
 
 // Partials
 @use 'partials/nav';