.mansonry-container {
	min-height: 360px;
}
.filters {
	border-bottom: 2px solid var(--gray-3);
	margin-bottom: 30px;
	text-align: center;
}
#image-gallery button {
	background: var(--gray-3);
	border: none;
	border-radius: 6px 6px 0 0;
	color: #fff;
	cursor: pointer;
	font-weight: 500;
	margin: 0;
	padding: 8px 14px;
}
#image-gallery button.active,
#image-gallery button:is(:hover,:focus,:active) {
	background: var(--gray-9);
	color: #fff;
}
.masonry {
	margin: 0 auto;
	max-width: 1140px;
	opacity: 0;
	position: relative;
	transition: all .5s;
}
.masonry.is-loaded {
    opacity: 1;
}
.masonry-item {
	left: 0;
	opacity: 1;
	position: absolute;
		top: 0;
	transform: translate(0, 0);
	transition: transform .3s ease, opacity .3s ease;
	width: 180px;
	will-change: transform, opacity;
}
.masonry-item img {
	border-radius: 6px;
	display: block;
	height: auto;
	max-width: 180px;
}
.masonry-item.is-hidden {
	opacity: 0;
	pointer-events: none;
}
@media (max-width: 520px) {
	.filters {
		border: none;
		margin: 0 auto 30px;
	}
	#image-gallery button {
		border-radius: 4px;
		margin: 0 auto 4px;
		padding: 4px 10px;
	}
}
@media (max-width: 420px) {
	.filters {
		max-width: 260px;
	}
}