.mansonry-container {
	min-height: 22.5rem;
}
.filters {
	border-bottom: 2px solid var(--gray-3);
	margin-bottom: 1.875rem;
	text-align: center;
}
#image-gallery button {
	background: var(--gray-3);
	border: none;
	border-radius: 0.375rem 0.375rem 0 0;
	color: #fff;
	cursor: pointer;
	font-weight: 500;
	margin: 0;
	padding: 0.5rem 0.875rem;
}
#image-gallery button.active,
#image-gallery button:is(:hover,:focus,:active) {
	background: var(--gray-9);
	color: #fff;
}
.masonry {
	margin: 0 auto;
	max-width: 71.25rem;
	opacity: 0;
	overflow: hidden;
	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: 11.25rem;
	will-change: transform, opacity;
}
.masonry-item img {
	border-radius: 0.375rem;
	display: block;
	height: auto;
	max-width: 11.25rem;
}
.masonry-item.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease .3s;
}
@media (max-width: 520px) {
	.filters {
		border: none;
		margin: 0 auto 1.875rem;
	}
	#image-gallery button {
		border-radius: 0.25rem;
		margin: 0 auto 0.25rem;
		padding: 0.25rem 0.625rem;
	}
}
@media (max-width: 420px) {
	.filters {
		max-width: 16.25rem;
	}
}