@media (min-width: 54rem) {

	.masonry-layout {
		box-sizing: border-box;
		--columns: 1;
		--gap: 2rem;
		display: grid;
		grid-template-columns: repeat(var(--columns), 1fr);
		grid-gap: var(--gap);
	}

	.masonry-layout > div > img,
	.masonry-layout > div > div {
		width: 100%;
		margin-bottom: 2rem;
	}

	.masonry-layout.columns-1 {
		--columns: 1;
	}

	.masonry-layout.columns-2 {
		--columns: 2;
	}

	.masonry-layout.columns-3 {
		--columns: 3;
	}

	.masonry-layout.columns-4 {
		--columns: 4;
	}
}