refining block reordering and padding chaining

css/app.css

@@ -104,6 +104,14 @@
   content: none;
 }
 
+.deligraph-blocks-chapter-section + .gallery-website-screens{
+  margin-top: 3rem;
+}
+
+.simple-screen--white + .gallery-website-screens{
+  margin-top: 8rem;
+}
+
 .wp-admin.post-type-portfolio .is-root-container,
 .portfolio-single{
   margin-left: auto;
@@ -437,10 +445,23 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
   padding: 2.5rem;
+}
+
+.gallery-website-screens--padding-simple{
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.gallery-website-screens--padding-double{
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.gallery-website-screens{
   margin: 0 calc(50% - 50vw);
 }
 
-.gallery-website-screens ul{
+.gallery-website-screens__screens-grid{
   margin-left: auto;
   margin-right: auto;
   list-style-type: none;
@@ -451,45 +472,75 @@
 }
 
 @media (min-width: 782px){
-  .gallery-website-screens ul{
+  .gallery-website-screens__screens-grid{
     padding-left: 1rem;
     padding-right: 1rem;
   }
 }
 
 @media (min-width: 960px){
-  .gallery-website-screens ul{
+  .gallery-website-screens__screens-grid{
     padding-left: 3rem;
     padding-right: 3rem;
   }
 }
 
-.gallery-website-screens ul.is-grid{
+.gallery-website-screens__screens-grid.is-grid{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 @media (min-width: 960px){
-  .gallery-website-screens ul.is-grid{
+  .gallery-website-screens__screens-grid.is-grid{
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
-.gallery-website-screens ul.is-flex{
+.gallery-website-screens__screens-grid.is-flex{
   display: flex;
   flex-wrap: nowrap;
 }
 
-.gallery-website-screens ul.is-mobile-capture{
-  gap: 6rem;
+.gallery-website-screens__screens-grid.is-flex img{
+  max-height: 24rem;
 }
 
-.gallery-website-screens ul.is-mobile-capture img{
+@media (min-width: 782px){
+  .gallery-website-screens__screens-grid.is-mobile-capture{
+    gap: 1.5rem;
+  }
+}
+
+@media (min-width: 1280px){
+  .gallery-website-screens__screens-grid.is-mobile-capture{
+    gap: 3rem;
+  }
+}
+
+.gallery-website-screens__screens-grid.is-mobile-capture img{
   max-width: 15rem;
-  border-radius: 1.5rem;
+  border-radius: 0.75rem;
 }
 
-.gallery-website-screens ul{
+@media (min-width: 1280px){
+  .gallery-website-screens__screens-grid.is-mobile-capture img{
+    border-radius: 1.5rem;
+  }
+}
+
+.gallery-website-screens__screens-grid .gallery-website-screens__single-screen img {
+  width: 100%;
+  /* Fixe la largeur max */
+  height: 100%;
+  /* Fixe la hauteur max */
+  max-height: 800px;
+  /* Ajuste selon ton besoin */
+  -o-object-fit: cover;
+     object-fit: cover;
+  /* Évite les déformations */
+}
+
+.gallery-website-screens__screens-grid{
   max-width: 1800px;
 }
 

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

@@ -1,18 +1,37 @@
 .gallery-website-screens {
 	@apply bg-neutral-100 p-10 w-screen;
+	&--padding-simple {
+		@apply py-10;
+	}
+	&--padding-double {
+		@apply py-16;
+	}
 	margin: 0 calc(50% - 50vw);
-	ul {
+
+	&__screens-grid {
 		@apply gap-4 px-0 md:px-4 lg:px-12 justify-center list-none mx-auto;
 		&.is-grid {
 			@apply grid grid-cols-2 lg:grid-cols-3;
 		}
 		&.is-flex {
 			@apply flex flex-nowrap;
+			img {
+				@apply max-h-96;
+			}
 		}
 		&.is-mobile-capture {
-			@apply gap-24;
+			@apply md:gap-6 xl:gap-12;
 			img {
-				@apply rounded-3xl max-w-60;
+				@apply rounded-xl xl:rounded-3xl max-w-60;
+			}
+		}
+
+		.gallery-website-screens__single-screen {
+			img {
+				width: 100%; /* Fixe la largeur max */
+				height: 100%; /* Fixe la hauteur max */
+				max-height: 800px; /* Ajuste selon ton besoin */
+				object-fit: cover; /* Évite les déformations */
 			}
 		}
 

resources/css/editor/editor.css

@@ -14,3 +14,10 @@
 		content: none;
 	}
 }
+.deligraph-blocks-chapter-section + .gallery-website-screens {
+	@apply mt-12;
+}
+
+.simple-screen--white + .gallery-website-screens {
+	@apply mt-32;
+}