diff --git a/css/app.css b/css/app.css index 6ff7a7a..9cd3484 100644 --- a/css/app.css +++ b/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; }