.wbw-container {
	max-width: var(--wbw-max-width);
	margin: 0 auto;
	padding: 0 var(--wbw-gutter);
}

.wbw-section { padding: 64px 0; }
.wbw-section--tight { padding: 40px 0; }
.wbw-section--dark {
	background: var(--wbw-near-black);
	color: var(--wbw-cream);
}

.wbw-grid {
	display: grid;
	gap: 20px;
}
.wbw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wbw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wbw-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.wbw-grid--2, .wbw-grid--3, .wbw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.wbw-grid--2, .wbw-grid--3, .wbw-grid--4 { grid-template-columns: 1fr; }
	.wbw-gutter, .wbw-container { padding-left: 18px; padding-right: 18px; }
}

.wbw-flex { display: flex; }
.wbw-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.wbw-media {
	width: 100%;
	display: block;
	object-fit: cover;
	background: var(--wbw-tan);
}
.wbw-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	aspect-ratio: 4 / 5;
	background: repeating-linear-gradient(
		135deg,
		var(--wbw-tan),
		var(--wbw-tan) 10px,
		var(--wbw-cream-alt) 10px,
		var(--wbw-cream-alt) 20px
	);
	color: var(--wbw-text-muted);
	font-size: 12.5px;
	padding: 12px;
	border-radius: inherit;
}