Pulls out link-gallery module

2 files changed, 60 insertions, 1 deletions

diff --git a/public/css/modules/index.css b/public/css/modules/index.css
index a3d8cfc..974121c 100644
--- a/public/css/modules/index.css
+++ b/public/css/modules/index.css
@@ -4,4 +4,5 @@
 @import './back-to-top.css';
 @import './product.css';
 @import './schedule.css';
-@import './schedule.lg.css' (min-width: 35rem);
\ No newline at end of file
+@import './schedule.lg.css' (min-width: 35rem);
+@import './link-gallery.css';
\ No newline at end of file
diff --git a/public/css/modules/link-gallery.css b/public/css/modules/link-gallery.css
new file mode 100644
index 0000000..a1c676f
--- /dev/null
+++ b/public/css/modules/link-gallery.css
@@ -0,0 +1,58 @@
+.link-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-inline-sm);
+  padding-block: var(--spacing-block-md);
+}
+
+.link-gallery__container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  align-items: center;
+  height: fit-content;
+}
+
+.link-gallery--furthsettins {
+  --gallery-item-width: 6rem;
+  --gallery-item-height: 6rem;
+  justify-content: space-evenly;
+}
+
+.link-gallery--lallans {
+  --gallery-item-width: 9rem;
+  --gallery-item-height: auto;
+}
+
+.link-gallery--scotsoun {
+  --gallery-item-width: 8rem;
+  --gallery-item-height: 8rem;
+}
+
+.link-gallery__image {
+  max-width: var(--gallery-item-width);
+  max-height: var(--gallery-item-height);
+}
+
+.link-gallery--furthsettins img {
+  border-radius: 50%;
+}
+
+.link-gallery__image img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.link-gallery__title {
+  justify-self: end;
+  max-width: var(--gallery-item-width);
+  min-height: 11ex;
+  min-height: 3lh;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: center;
+  margin-inline: var(--spacing-inline-xs);
+}
\ No newline at end of file