section > * { box-sizing: border-box; padding: 0; } section > .row:not(.back) > .col2 { padding: 5px; } .gallery { position: relative; } .galleryGalleryPicture { box-sizing: content-box; padding: 12px 0 2px; display: flex; align-items: center; justify-content: center; position: relative; text-align: center; background-color: rgba(230, 230, 230, 0.7); border: 1px solid #ddd; border-radius: 6px; transition: background-color 1.3s ease; } .galleryGalleryPicture:hover { background-color: rgb(192, 192, 192); } .galleryGalleryName { line-height: 1.2; } .galleryGalleryPicture > figure > img { max-height: 20vmin; max-width: 95%; object-fit: contain; } .picResized { color: crimson; } .osm { position: absolute; right:10px; top:10px; } figure, figcaption { border: none; margin: 0; padding: 0; } /* styles adaptatifs */ @media (min-width: 1920px) { .galleryGalleryPicture > figure > img { max-height: 200px; } } @media (max-width: 1025px) { .galleryGalleryName { font-size: 0.78em; } } @media (max-width: 799px) { section > .row:not(.back) { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .gallery { flex: 0 0 33.3333%; } .galleryGalleryPicture > figure > img { max-height: 25vmin; } } @media (max-width: 599px) { .gallery { flex: 0 0 50%; } .galleryGalleryName { display: none; } .galleryGalleryPicture { padding: 12px 0 7px; } }