.wbx-section {
	position: relative;
	padding-block: var(--wp--preset--spacing--lg);
}

.wbx-section--light {
	background: var(--wbx-color-white);
	color: var(--wbx-color-ink);
}

.wbx-section--soft {
	background: var(--wbx-color-offwhite);
	color: var(--wbx-color-ink);
}

.wbx-section--dark {
	background: var(--wbx-color-navy);
	color: var(--wbx-color-white);
}

.wbx-section--accent {
	background: var(--wbx-color-mint);
	color: var(--wbx-color-navy);
}

.wbx-section--gradient {
	background:
		radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--wbx-color-mint) 28%, transparent), transparent 18rem),
		linear-gradient(135deg, var(--wbx-color-white), var(--wbx-color-offwhite));
}

.wbx-home-hero {
	background: var(--wbx-color-white);
}

.wbx-section__inner,
.wbx-container {
	width: min(100% - (2 * var(--wbx-gutter)), var(--wbx-content-default));
	max-width: var(--wbx-content-default);
	margin-inline: auto;
}

.wbx-container--narrow {
	width: min(100% - (2 * var(--wbx-gutter)), var(--wbx-content-narrow));
}

.wbx-container--wide {
	width: min(100% - (2 * var(--wbx-gutter)), var(--wbx-content-wide));
}

.wbx-grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
}

.wbx-grid--2,
.wbx-grid--3,
.wbx-grid--4,
.wbx-bento {
	grid-template-columns: 1fr;
}

.wbx-flow > * + *,
.wbx-stack > * + * {
	margin-block-start: var(--wp--preset--spacing--sm);
}

.wbx-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.wbx-stack > .alignleft {
	align-self: flex-start;
}

.wbx-stack > .aligncenter {
	align-self: center;
}

.wbx-stack > .alignright {
	align-self: flex-end;
}

.wbx-align-start {
	align-items: start;
}

@media (min-width: 760px) {
	.wbx-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wbx-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wbx-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wbx-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1120px) {
	.wbx-bento {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wbx-bento > :nth-child(1),
	.wbx-bento > :nth-child(2) {
		grid-column: span 2;
	}
}