From c31174bb4fd3d8271bd27a714292ae17cf4e6b72 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 10 Feb 2025 16:32:18 +0100
Subject: [PATCH] implementing variation on height

---
 css/app.css                                     | 15 +++++++++++++--
 .../css/blocks/gallery-website-screens.css      | 17 ++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/css/app.css b/css/app.css
index 6ee240c..2c94249 100644
--- a/css/app.css
+++ b/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;
-  /* Ajuste selon ton besoin */
+  /* max-height: 500px; Ajuste selon ton besoin */
   -o-object-fit: cover;
      object-fit: cover;
   /* Évite les déformations */
diff --git a/resources/css/blocks/gallery-website-screens.css b/resources/css/blocks/gallery-website-screens.css
index 3a6dc1d..9cb468b 100644
--- a/resources/css/blocks/gallery-website-screens.css
+++ b/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 */
 			}
 		}