diff --git a/app/components/post_gallery_component/post_gallery_component.html.erb b/app/components/post_gallery_component/post_gallery_component.html.erb
index 6375023bb..1ee3a4e13 100644
--- a/app/components/post_gallery_component/post_gallery_component.html.erb
+++ b/app/components/post_gallery_component/post_gallery_component.html.erb
@@ -2,7 +2,7 @@
<% if posts.empty? %>
No posts found.
<% else %>
-
+
<% posts.each do |post| -%>
<% %><%= post -%>
<% end -%>
diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss
index cceed7d85..6f52c3cc7 100644
--- a/app/components/post_gallery_component/post_gallery_component.scss
+++ b/app/components/post_gallery_component/post_gallery_component.scss
@@ -1,6 +1,14 @@
+.post-gallery {
+ .post-preview-image {
+ max-width: 100%;
+ }
+}
+
.post-gallery-inline {
- overflow-x: auto;
- white-space: nowrap;
+ .posts-container {
+ overflow-x: auto;
+ white-space: nowrap;
+ }
article.post-preview {
width: auto;
@@ -12,13 +20,10 @@
}
}
-.post-gallery {
+.post-gallery-grid {
.posts-container {
- place-items: center;
- }
-
- .post-preview-image {
- max-width: 100%;
+ display: grid;
+ gap: 0.5rem;
}
&.post-gallery-150 .posts-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }