Improve media grid breakpoints

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;

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,