Furthsettins gallery uses link-gallery CSS component

2 files changed, 26 insertions, 33 deletions

diff --git a/public/main.css b/public/main.css
index 4fad865..2a7be46 100644
--- a/public/main.css
+++ b/public/main.css
@@ -347,23 +347,27 @@ footer {
   }
 }
 
-.publications-gallery {
+.product__header-block {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
-  gap: var(--spacing-inline-md);
+  gap: var(--spacing-inline-sm);
+  padding-inline: var(--spacing-inline-md);
+  padding-block: var(--spacing-block-lg) var(--spacing-block-xl);
 }
 
-.publications-gallery a {
-  display: block;
+.product__action-block {
+  display: flex;
+  flex-direction: column;
+  margin-inline: auto;
+  width: fit-content;
+  gap: var(--spacing-block-sm);
 }
 
-.publications-gallery__image {
-  margin-inline: auto;
-  width: 3rem;
+.product__action-block img {
+  max-width: 12rem;
+  width: 100%;
   height: auto;
-  min-width: var(--spacing-inline-sm);
-  border-radius: 50%;
 }
 
 .link-gallery {
@@ -380,27 +384,10 @@ footer {
   height: 12rem;
 }
 
-.product__header-block {
-  display: flex;
-  flex-wrap: wrap;
+.link-gallery--furthsettins {
+  --gallery-item-width: 6rem;
+  --gallery-item-height: 6rem;
   justify-content: space-evenly;
-  gap: var(--spacing-inline-sm);
-  padding-inline: var(--spacing-inline-md);
-  padding-block: var(--spacing-block-lg) var(--spacing-block-xl);
-}
-
-.product__action-block {
-  display: flex;
-  flex-direction: column;
-  margin-inline: auto;
-  width: fit-content;
-  gap: var(--spacing-block-sm);
-}
-
-.product__action-block img {
-  max-width: 12rem;
-  width: 100%;
-  height: auto;
 }
 
 .link-gallery--lallans {
@@ -414,6 +401,10 @@ footer {
   max-height: var(--gallery-item-height);
 }
 
+.link-gallery--furthsettins img {
+  border-radius: 50%;
+}
+
 .link-gallery__image img {
   max-width: 100%;
   max-height: 100%;
diff --git a/src/pages/[locale]/furthsettins/index.astro b/src/pages/[locale]/furthsettins/index.astro
index 11e39f1..c6a805e 100644
--- a/src/pages/[locale]/furthsettins/index.astro
+++ b/src/pages/[locale]/furthsettins/index.astro
@@ -18,11 +18,13 @@ const t = translate(locale);
   <section>
     <h1>Furthsettins</h1>
 
-    <ul class="publications-gallery">
+    <ul class="link-gallery link-gallery--furthsettins">
       <li>
-        <a href="lallans" class="link">
-          <img src="/images/furthsettins/lallans.jpg" class="publications-gallery__image" />
-          <p class="publications-gallery__title">{t(tSite, { key: 'lallans' })}</p>
+        <a href="lallans" class="link link-gallery__container">
+          <div class="link-gallery__image">
+            <img src="/images/furthsettins/lallans.jpg" />
+          </div>
+          <p class="link-gallery__title">{t(tSite, { key: 'lallans' })}</p>
         </a>
       </li>
     </ul>