From f040f04ea272eccc2d23ae642293f5a8d2daedbd Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Mon, 1 Jul 2024 18:42:02 +0200
Subject: [PATCH] Improve media grid breakpoints

---
 app/assets/stylesheets/media.scss | 26 +++++++++++++++++++++++---
 app/views/media/_media.html.erb   |  2 +-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
index 858af0417..c8b53f40d 100644
--- a/app/assets/stylesheets/media.scss
+++ b/app/assets/stylesheets/media.scss
@@ -1,6 +1,26 @@
-// Place all the styles related to the media controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+.media-grid {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(12);
+  }
+
+  @include media-breakpoint-up(md) {
+    @include make-col(6);
+  }
+
+  @media (min-width: 1100px) {
+    @include make-col(4);
+  }
+
+  @media (min-width: 1300px) {
+    @include make-col(3);
+  }
+
+  @media (min-width: 1700px) {
+    @include make-col(2.4);
+  }
+}
 
 .hidden {
   display: none;
diff --git a/app/views/media/_media.html.erb b/app/views/media/_media.html.erb
index c70bf99c9..2a5b1e3f6 100644
--- a/app/views/media/_media.html.erb
+++ b/app/views/media/_media.html.erb
@@ -1,7 +1,7 @@
 <% if media.present? %>
   <div class="row">
     <% media.each do |medium| %>
-      <div class="col-12 col-md-6 col-lg-4 col-xl-3 pb-2">
+      <div class="media-grid pb-2">
         <%= render partial: 'media/medium',
                    locals: { medium: medium,
                              tags: tags,