mivita/_static/assets/LESS/LESS_BS3/smarty/layout-css-simple-gallery.less
2018-10-29 09:39:31 +01:00

104 lines
No EOL
2.5 KiB
Text

/** Simple Gallery [CSS ONLY]
**************************************************************** **/
.gallery-simple {
margin: 1rem 0;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.gallery-simple.gallery-simple-columns-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
-webkit-column-width: 20%;
-moz-column-width: 20%;
column-width: 20%;
}
.gallery-simple.gallery-simple-columns-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-width: 25%;
-moz-column-width: 25%;
column-width: 25%;
}
.gallery-simple.gallery-simple-columns-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.gallery-simple.gallery-simple-columns-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 50%;
-moz-column-width: 50%;
column-width: 50%;
}
.gallery-simple.gallery-simple-columns-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}
.gallery-simple img {
width: 100% !important;
height: auto !important;
margin-bottom: 1rem;
}
.gallery-simple>a>img {
margin-bottom: 0;
}
.gallery-simple>a {
position: relative;
display: block;
margin-bottom: 1rem;
}
.gallery-simple .image-hover-overlay::before {
bottom:10px;
}
@media only screen and (max-width: 768px) {
.gallery-simple {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
}
@media only screen and (max-width: 482px) {
.gallery-simple {
-webkit-column-count: 2 !important;
-moz-column-count: 2 !important;
column-count: 2 !important;
-webkit-column-width: 50% !important;
-moz-column-width: 50% !important;
column-width: 50% !important;
}
}