update

themes/gallo/layouts/partials/artist_catalog.html

@@ -28,7 +28,7 @@
       <a class="w-full" href="#modal-{{ $index | urlize }}">
         <button
           type="button"
-          class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
+          class="w-full px-4 py-4 sm:py-2 sm:px-3 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
         >
           Expand
         </button>
@@ -62,20 +62,7 @@
                   <strong>{{ .item }}</strong>
                 </h3>
                 {{ if .gallery }}
-                <div
-                  class="columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
-                >
-                  {{ range $index, $element := .gallery }}
-                  <div class="relative ease-in-out duration-200 transition-all">
-                    <img
-                      id="img-{{ $index }}"
-                      loading="lazy"
-                      class="rounded-md w-full"
-                      src="{{ .image }}"
-                    />
-                  </div>
-                  {{ end }}
-                </div>
+                <div class="carousel">{{ partial "carousel.html" . }}</div>
                 {{ end }}
                 <div>
                   <div class="flex flex-row gap-2 my-2 justify-between mt-4">
@@ -108,7 +95,7 @@
                   </div>
                   <div class="flex flex-col items-start">
                     <span class="text-xs text-gray-600">Description:</span>
-                    <span> {{ .description }} </span>
+                    <span class="text-left"> {{ .description }} </span>
                   </div>
                 </div>
               </div>
@@ -117,7 +104,7 @@
           <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
             <button
               id="close-modal"
-              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
+              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-4 sm:py-2 sm:px-3 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
               @click="open = false"
             >
               Close

themes/gallo/layouts/partials/buttons.html

@@ -1,5 +1,5 @@
 {{ if .Params.buttons }}
-<div class="mt-4 flex flex-row gap-4">
+<div class="mt-4 flex flex-wrap gap-2">
   {{ range .Params.buttons}}
   <a href="{{ .url }}"
     ><button

themes/gallo/layouts/partials/carousel.html

@@ -1,5 +1,4 @@
-<div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
-  <div class="rounded-md relative overflow-hidden pt-[100%]">
+<div class="rounded-md relative overflow-hidden pt-[100%]">
   <div
     class="carousel-wrapper flex transition-transform duration-300 ease-in-out absolute inset-0"
   >
@@ -32,7 +31,6 @@
   >
     1 / {{ len .gallery }}
   </div>
-  </div>
 </div>
 
 <script>

themes/gallo/layouts/partials/nav.html

@@ -1,4 +1,6 @@
-<div class="p-4 min-h-[40.27px] flex flex-col sm:flex-row w-full justify-between bg-black">
+<div
+  class="p-4 min-h-[40.27px] flex flex-col sm:flex-row w-full justify-between bg-black"
+>
   <a class="justify-center flex mb-2 sm:mb-0" aria-label="Back to home" href="/"
     ><img
       class="w-44 h-[40.2667px]"
@@ -6,10 +8,11 @@
       src="{{ .Site.Params.logo }}"
       loading="lazy"
   /></a>
-  <nav class="place-self-center h-8 flex justify-end gap-2 text-white pr-6">
+  <nav class="place-self-center h-8 flex justify-end gap-4 text-white pr-0 sm:pr-6">
     {{ range .Site.Menus.main }}
     <a
-      class="ml-2 underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center"
+      style="white-space: nowrap"
+      class="underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center"
       href="{{ .URL }}"
       aria-label="{{ .Identifier }}"
     >

themes/gallo/layouts/partials/rental_catalog.html

@@ -141,7 +141,11 @@
                   {{ .item }}
                 </div>
                 <div class="flex flex-col sm:flex-row">
-                  {{ if .gallery }} {{ partial "carousel.html" . }} {{ end }}
+                  {{ if .gallery }}
+                  <div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
+                    {{ partial "carousel.html" . }}
+                  </div>
+                  {{ end }}
                   <div class="z-20 sm:pl-4 w-full md:w-1/3 sm:w-1/2">
                     <div
                       class="flex flex-col h-full justify-between text-md text-gray-800 text-base"