.galleryPage div { display: flex; flex-wrap: wrap; justify-content: var(--pagainterne--titre-align); align-items: center; } .galleryPage div img { width: 100%; height:100%; object-fit: fill; object-fit: cover; border-radius: 5px; transform: scale(1.05); transition: transform .5s, filter .5s; } .galleryPage { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* grid-auto-rows: 300px;*/ grid-auto-flow: dense; padding: 1rem; background: var(--pagainterne--BG-color); border-radius: var(--FE-content-radius); border-radius:10px; width: 90%; margin-top: 20px; margin-bottom: 20px; } /* Gallery Link */ .galleryPage__link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; } .galleryPage__overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: var(--Carte--titre-textalign-H1); justify-content:var(--pagainterne-justify-content); color: var(--Carte--titre-colorH1); font-size: var(--Carte--titre-size-H1); text-align: var(--Carte--titre-textalign-H1); background: rgba(0, 0, 0, 0.4); font-weight: 700; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .2s; } .galleryPage__link:hover .galleryPage__overlay { opacity: 1; } .galleryPage__overlay span { position: relative; line-height: 3rem; } .galleryPage__overlay span:before, .galleryPage__overlay span:after { content: ''; position: absolute; height: 2px; width: 0; background:#fff; transition: width .3s ease-out .2s; } .galleryPage__overlay span:before { top: 0; left: 0; } .galleryPage__overlay span:after { bottom: 0; right: 0; } .galleryPage__link:hover .galleryPage__overlay span:before, .galleryPage__link:hover .galleryPage__overlay span:after { width: 100%; } .galleryPage__image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform .5s, filter .5s; } .galleryPage__link:hover .galleryPage__image { transform: scale(1.2); /* filter: blur(2px);*/ } .galleryPage .col2 { grid-column: span 2; } .galleryPage .lig2 { grid-row: span 2; } .galleryPage .big { grid-column: span 2; grid-row: span 2; } .galleryPage .col2lig2 { grid-column: span 2; grid-row: span 3; } .galleryPage .col3lig2 { grid-column: span 3; grid-row: span 2; } .galleryPage .lig3 { grid-column: span 3; } @media screen and (max-width: 1200px) { .galleryPage div, .galleryPage { width: 100%; } .galleryPage { padding: 1rem; grid-template-columns: repeat(3, 1fr); } .galleryPage div img { object-fit: fill; } .galleryPage__overlay { font-size: 1rem; } }