.picture-gallery { margin: 30px auto 15px; } /**/ .aurevia-skin .picture-gallery { display: flex; flex-wrap: wrap; width: 100%; margin-inline: 0; } .aurevia-skin .picture-gallery::before, .aurevia-skin .picture-gallery::after { content: none; } .aurevia-skin .picture-gallery > [class*="col-md-"] { flex: 0 0 calc(100% / var(--photo-gallery-columns, 1)); width: calc(100% / var(--photo-gallery-columns, 1)); max-width: calc(100% / var(--photo-gallery-columns, 1)); min-width: 0; padding: 10px; box-sizing: border-box; float: none; } .aurevia-skin .picture-gallery > .col-md-12 { --photo-gallery-columns: 1; } .aurevia-skin .picture-gallery > .col-md-6 { --photo-gallery-columns: 2; } .aurevia-skin .picture-gallery > .col-md-4 { --photo-gallery-columns: 3; } .aurevia-skin .picture-gallery > .col-md-3 { --photo-gallery-columns: 4; } .aurevia-skin .picture-gallery > .col-md-2 { --photo-gallery-columns: 6; } .aurevia-skin .picture-gallery > .col-md-1 { --photo-gallery-columns: 12; } .aurevia-skin .picture-gallery .picture__item { margin: 0; } @media (max-width: 991px) { .aurevia-skin .picture-gallery > [class*="col-md-"]:not(.col-md-12) { --photo-gallery-columns: 2; } } @media (max-width: 575px) { .aurevia-skin .picture-gallery > [class*="col-md-"], .aurevia-skin .picture-gallery > [class*="col-md-"]:not(.col-md-12) { --photo-gallery-columns: 1; } } @media (max-width: 768px) { .picture-gallery { margin: 0 auto 15px; } } .picture-gallery .picture__item { position: relative; overflow: hidden; margin-bottom: 15px; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.12); } @media (max-width: 992px) { .picture-gallery .picture__item { margin: 0 20px 5px 20px; } } .picture-gallery .picture__item:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); } .picture-gallery .picture__item:hover .picture__item__image img { transform: scale(1.1); opacity: 0.4; } .picture-gallery .picture__item:hover .picture__item__desc { opacity: 0; transform: translateY(0); } .picture-gallery .picture__item:hover .picture__item__title { color: #eabd0f; } .picture-gallery .picture__item:after { height: 30%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4)); content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; } .picture-gallery .picture__item .picture__item__link { position: absolute; transform: rotateZ(45deg); background: #eabd0f; display: block; width: 90px; right: -30px; top: 0px; z-index: 3; text-align: center; color: white; padding-top: 6px; } .picture-gallery .picture__item .picture__item__link[href="#"], .picture-gallery .picture__item .picture__item__link[href=""] { display: none; } .picture-gallery .picture__item .picture__item__link i.fa { transform: rotateZ(-45deg); } .picture-gallery .picture__item .picture__item__image { background: #000; overflow: hidden; z-index: 1; } .picture-gallery .picture__item .picture__item__image img { display: block; transition: all 200ms cubic-bezier(0, 0.25, 0.75, 1); width: 100%; } .picture-gallery .picture__item .picture__item__desc { position: absolute; top: 15px; left: 30px; right: 30px; bottom: 60px; transition: all 300ms cubic-bezier(0, 0.25, 0.75, 1); transition-delay: 100ms; transform: translateY(-100%); opacity: 0; color: white; text-align: justify; line-height: 1.7; } .picture-gallery .picture__item .picture__item__title { position: absolute; left: 30px; right: 30px; bottom: 15px; color: white; text-shadow: 1px 1px 2px #000; font-weight: bold; font-size: 11pt; text-align: center; transition: all 200ms; margin: 0; padding: 0; z-index: 4; } @media only screen and (max-width: 768px) { .lg-sub-html { display: none; } } .gallery__pager { text-align: center; } .gallery__pager ul { display: inline-block; padding: 0; margin: 20px 0; } .gallery__pager ul li { display: inline-block; } .gallery__pager ul li a { position: relative; padding: 6px 12px; margin-left: -1px; min-width: 35px; display: block; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #d0d0d0; border-radius: 5px; }