97 lines
1.6 KiB
SCSS
97 lines
1.6 KiB
SCSS
|
.gallery {
|
||
|
|
|
||
|
|
column-count: 4;
|
||
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
|
|
column-gap: 20px;
|
||
|
|
|
||
|
|
&.flex {
|
||
|
|
display:flex;
|
||
|
|
flex-wrap:wrap;
|
||
|
|
.item {
|
||
|
|
flex:1 0 21%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.has-shadow {
|
||
|
|
.item img, .item figure {
|
||
|
|
box-shadow: 2px 2px 4px 0 rgba(var(--bs-body-color-rgb), 0.25);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.masonry {
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.grid {
|
||
|
|
display:grid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
width: 100%;
|
||
|
|
transition:1s ease all;
|
||
|
|
box-sizing: border-box;
|
||
|
|
figure {
|
||
|
|
margin:0;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item a {display:block;width:100%;height:100%;}
|
||
|
|
.item img, .item figure {max-width:100%;cursor:pointer;}
|
||
|
|
|
||
|
|
&.cover {
|
||
|
|
.item {
|
||
|
|
figure, img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
max-width: initial;
|
||
|
|
min-height: 100%;
|
||
|
|
min-width: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hover-effect {
|
||
|
|
.item {
|
||
|
|
overflow:hidden;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: calc(100% + 50px);
|
||
|
|
max-width: calc(100% + 50px);
|
||
|
|
transition: opacity 0.35s, transform 0.35s;
|
||
|
|
transform: translate3d(-40px, 0, 0);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
transition: opacity 0.35s, transform 0.35s;
|
||
|
|
filter:brightness(0.8) contrast(1.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 320px) {
|
||
|
|
.masonry {
|
||
|
|
column-count: 1 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 321px) and (max-width: 768px){
|
||
|
|
.masonry {
|
||
|
|
column-count: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 769px) and (max-width: 1200px){
|
||
|
|
.masonry {
|
||
|
|
column-count: 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 1201px) {
|
||
|
|
.masonry {
|
||
|
|
column-count: 4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|