implementing variation on height

css/app.css

@@ -508,6 +508,18 @@
   max-height: 24rem;
 }
 
+.gallery-website-screens__screens-grid.is-flex.height--small img{
+  max-height: 16rem;
+}
+
+.gallery-website-screens__screens-grid.is-flex.height--medium img{
+  max-height: 20rem;
+}
+
+.gallery-website-screens__screens-grid.is-flex.height--big img{
+  max-height: 24rem;
+}
+
 @media (min-width: 782px){
   .gallery-website-screens__screens-grid.is-mobile-capture{
     gap: 1.5rem;
@@ -536,8 +548,7 @@
   /* Fixe la largeur max */
   height: 100%;
   /* Fixe la hauteur max */
-  max-height: 800px;
+  /* max-height: 500px; Ajuste selon ton besoin */
-  /* Ajuste selon ton besoin */
   -o-object-fit: cover;
      object-fit: cover;
   /* Évite les déformations */

resources/css/blocks/gallery-website-screens.css

@@ -18,6 +18,21 @@
 			img {
 				@apply max-h-96;
 			}
+			&.height--small {
+				img {
+					@apply max-h-64;
+				}
+			}
+			&.height--medium {
+				img {
+					@apply max-h-80;
+				}
+			}
+			&.height--big {
+				img {
+					@apply max-h-96;
+				}
+			}
 		}
 		&.is-mobile-capture {
 			@apply md:gap-6 xl:gap-12;
@@ -30,7 +45,7 @@
 			img {
 				width: 100%; /* Fixe la largeur max */
 				height: 100%; /* Fixe la hauteur max */
-				max-height: 800px; /* Ajuste selon ton besoin */
+				/* max-height: 500px; Ajuste selon ton besoin */
 				object-fit: cover; /* Évite les déformations */
 			}
 		}