init

static/Vvvebjs/demo/landing/scss/blocks/components/gallery.scss

@@ -0,0 +1,96 @@
+.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;
+		}
+	}
+}