/* GALLERY SPAN */
.gallery-span{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
	grid-template-columns: 1fr;
	grid-auto-columns: 300px;
	grid-gap: 0.5rem;
	grid-auto-flow: dense;
	position: relative;
}

.gallery-item{
	display: flex;
	height: 100%;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
}

.gallery-item-hidden{display: none;}

.gallery-img{
	object-fit: cover;
    width: 100%;
    height: 100%; 
}

.gallery-show-all-items{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 7px 15px;
	position: absolute;
	bottom: 15px;
	right: 15px;
	background: #fff;
	color: #555;
	border-radius: 10px;
	border:1px solid #555;
	opacity: 0.95;
}

.gallery-show-all-items.hide-btn{
	display: none;
}

.gallery-item-hidden.show-item{
	display: block;
}

.w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
	grid-column: span 1;
}

.h-1,.h-2,.h-3,.h-4,.h-5,.h-6{
	grid-row: span 1;
}

@media (min-width: 600px){
	.gallery-span{
/*		grid-template-columns: repeat(auto-fit, minmax(300px,1fr));*/
		/*grid-template-rows: repeat(2, 1fr);
		grid-template-columns: repeat(4, 1fr);*/
		grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 220px); /* fixed px, not 1fr */
        grid-auto-rows: 220px;                /* implicit rows get same height */
	}

	.w-1{
		grid-column: span 1;
	}

	.w-2{
		grid-column: span 2;
	}

	.w-3{
		grid-column: span 3;
	}

	.w-4{
		grid-column: span 4;
	}

	.w-5{
		grid-column: span 5;
	}

	.w-6{
		grid-column: span 6;
	}

	.h-1{
		grid-row: span 1;
	}

	.h-2{
		grid-row: span 2;
	}

	.h-3{
		grid-row: span 3;
	}

	.h-4{
		grid-row: span 4;
	}

	.h-5{
		grid-row: span 5;
	}

	.h-6{
		grid-row: span 6;
	}

}