.wp-block-artworks { max-width: 64rem; margin: 2em auto; }
.wp-block-artworks.alignfull { max-width: none; }

.wp-block-artworks .articles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}

.wp-block-artworks .articles article {
	border: 1px solid #707070;
	background: white;
	margin: 0 0 2em;
	width: 100%;
}

.wp-block-artworks.no-borders .articles article { border: none; background: transparent; }
.wp-block-artworks.no-borders .articles article .text { padding-left: 0; padding-right: 0; }

.wp-block-artworks .articles article .image { position: relative; }
.wp-block-artworks .articles article .image::before { content: ""; display: block; padding: 75% 0 0 0; }
.wp-block-artworks .articles article .image img { position: absolute; top: 0; left: 0; }

.wp-block-artworks .articles article .text { padding: 1em; }
.wp-block-artworks .articles article h2 { margin: 0; }

.wp-block-artworks .articles article .event-date { line-height: 1.5em; }
.wp-block-artworks .articles article .event-location { line-height: 1.5em; margin: 0.25em 0 0; }
.wp-block-artworks .articles article .event-location::before { content: "\e905"; display: inline-block; margin: 0 0.5em 0 0; font-family: "meadow-arts-icons"; font-weight: normal; font-size: 1.4em; vertical-align: middle; }

@media (min-width: 768px) {
	.wp-block-artworks .articles { justify-content: flex-start; margin: 0 -0.5em; }
	.wp-block-artworks.alignfull .articles { padding: 0 2.5em; }
	.wp-block-artworks .articles article { width: calc(33.33% - 1em); margin: 0 0.5em 1em; }
	.wp-block-artworks.columns-4 .articles article { width: calc(50% - 1em); }
	.wp-block-artworks .articles article .image { width: 100%; height: auto; }
	.wp-block-artworks .articles article .text { width: 100%; }
}

@media (min-width: 960px) {
	.wp-block-artworks.alignfull .articles { padding: 0 4.25em; margin: 0 -1em; }
	.wp-block-artworks.columns-3 .articles article { width: calc(33.33% - 2em); margin: 0 1em 2em; }
	.wp-block-artworks.columns-4 .articles article { width: calc(25% - 2em); margin: 0 1em 2em; }
	.wp-block-artworks .articles article .text { padding: 1em; }
}

@media (min-width: 1280px) {
	.wp-block-artworks.alignfull .articles { padding: 0 5em; margin: 6em -2em 0; }
	.wp-block-artworks.columns-3 .articles article { width: calc(33.33% - 4em); margin: 0 2em 4em; }
	.wp-block-artworks.columns-4 .articles article { width: calc(25% - 4em - 1px); margin: 0 2em 2em; }
}

@media (min-width: 1680px) {
	.wp-block-artworks.alignfull .articles { padding: 0 5.5em; }
}