.row {
	height: 100%;
	display: flex;
	gap: 40px;
	background-color: var(--surface-drops-base);
	padding-left: 40px;
	overflow: hidden;
	--minContent: 1787;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}

.col-left {
	position: relative;
	margin: 40px 0;
	width: 96%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-grow: 1;
	background-color: var(--surface-level-level-1-success);
	border-radius: var(--radius-xxl);
	overflow: hidden;
	--minContent: 747;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}

.img {
	position: absolute; top: 154px; left: -134px; right: -135px; 
	mix-blend-mode: multiply;
	width: calc(100% - -134px - -135px);
	max-width: none;
	--minContent: 747;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.text {
	width: 104%;
	flex-grow: 1;
	text-align: center;
	background-color: var(--surface-drops-base);
	padding: 485px 40px;
	--minContent: 960;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1024px) {
	.text {
		padding-inline: var(--margin-md);
	}
}

@media screen and (max-width: 576px) {
	.text {
		padding-inline: var(--margin-sm);
	}
}



/* container queries (flex rows) */

@media(max-width:1785px) {
	.row {
		flex-direction: column;
		align-items: center;
		gap: 100px;
	}
	.row > * {
		margin-top: unset !important;
		text-align: center;
	}
	.row > .col-left {
		width: 100%;
	}
	.row > .text {
		width: 100%;
	}
}