.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;
		}
	}
}