diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index a936700f5bb3719aac07ef5d0a834a77ee202714..ef2f1c41118f38bc65bc14951f508e0172d4f847 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -128,6 +128,13 @@ $space-unit: 4 !default
     @include media-breakpoint-down(desktop)
         grid-gap: $grid-gutter-sm
 
+@mixin flexbox-grid($cols: 12, $gap-y: $grid-gutter, $gap-x: $gap-y)
+    display: flex
+    flex-wrap: wrap
+    gap: $gap-y $gap-x
+    > *
+        flex: 0 0 calc(#{100 / $cols}% - #{$gap-x} * #{($cols - 1) / $cols} )
+
 // This must be used for content inside columns
 @function col($quantity, $base: 12)
     $quantity-on-base: $quantity / $base * 12
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index 609e87c3552240b2c451940e187cc179d2b39877..6cc19179e39b82d2bc7669dfe257599fc6328fd7 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -32,18 +32,17 @@
         .gallery
             align-items: baseline
             @include in-page-with-sidebar
-                @include grid(3, desktop, half($grid-gutter), half($grid-gutter))
+                @include flexbox-grid(3, half($grid-gutter))
             @include in-page-without-sidebar
-                @include grid(4, desktop)
+                @include flexbox-grid(4)
             @include media-breakpoint-down(desktop)
-                @include grid(2)
-                grid-gap: half($grid-gutter-sm) !important
+                @include flexbox-grid(2, half($grid-gutter-sm))
             &--with-text
                 @include in-page-without-sidebar
-                    @include grid(4, desktop, $spacing0)
+                    @include flexbox-grid(4, half($grid-gutter), $grid-gutter)
                 figure
-                    display: grid
-                    grid-template-columns: subgrid
+                    display: flex
+                    flex-direction: column
                     gap: space(3)
                     figcaption
                         &::after
diff --git a/layouts/partials/blocks/templates/gallery/grid.html b/layouts/partials/blocks/templates/gallery/grid.html
index 8ffcd8ba278fc2b6b0c43003af0eb6515f1b010f..afffc61150c5e274c053a8019b729c94f261672b 100644
--- a/layouts/partials/blocks/templates/gallery/grid.html
+++ b/layouts/partials/blocks/templates/gallery/grid.html
@@ -13,13 +13,13 @@
           {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
             {{ $lightbox_text := false }}
             {{ if and .text .credit }}
-              {{ $lightbox_text = delimit (slice .text .credit) " / " }}
-            {{ else }}
+              {{ $lightbox_text = delimit (slice .text .credit) " | " }}
+            {{ else if or .text .credit }}
               {{ $lightbox_text = or .text .credit }}
             {{ end }}
             <a  class="glightbox"
                 role="button"
-                data-glightbox="type: image;{{ if $lightbox_text }}description: {{ partial "PrepareHTML" $lightbox_text }}{{ end }}"
+                data-glightbox="type: image; {{ if $lightbox_text }}description: {{ partial "PrepareText" $lightbox_text }}{{ end }}"
                 href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
                 title="{{- i18n "commons.lightbox.link.title" -}}"
                 aria-label="{{- i18n "commons.lightbox.link.title" -}}">