/*
WRAPPER COMPOSITION
A common wrapper/container
*/
.wrapper {
	--wrapper-max-width: 1440px;
	margin-inline: auto;
	max-width: var(--wrapper-max-width, 1440px);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	position: relative;
}

.wrapper[data-wrapper-layout="full-width"] {
	padding-left: 0;
	padding-right: 0;
}

.grid-wrapper {
	--wrapper-max-width: calc(1440px - (var(--gutter) * 2));
	--gap: 0px;
	row-gap: var(--space-s);
	--col-width: calc(var(--wrapper-max-width) / 2);
	display: grid;
	grid-template-columns:
		minmax(var(--gutter), 1fr)
		min(50% - (var(--gutter) + (var(--space-s) / 2)), var(--col-width))
		calc(var(--space-s) / 2)
		calc(var(--space-s) / 2)
		min(50% - (var(--gutter) + (var(--space-s) / 2)), var(--col-width))
		minmax(var(--gutter), 1fr);
	grid-template-rows: auto;
	grid-template-areas: "left-gutter left-card gap gap right-card right-gutter";
	gap: var(--gap);
	@media screen and (min-width: 1440px) {
		grid-template-columns:
			1fr
			645px
			15px
			15px
			645px
			1fr;
	}
}
@media screen and (max-width: 950px) {
	.grid-wrapper {
		grid-template-rows: auto auto;
		grid-template-columns: var(--space-s-l) 1fr var(--space-s-l);
		gap: var(--space-xs) 0;
		grid-template-areas:
			"left-gutter left-card right-gutter"
			"left-gutter right-card right-gutter";
		align-items: center;
	}
}