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 */ } }