.dorra-split .ds-grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 36px;
	align-items: center;
}

.dorra-split .ds-media {
	order: 2;
}

.dorra-split .ds-body {
	order: 1;
}

.dorra-split .ds-frame {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--dor-radius-lg);
	overflow: hidden;
	background-color: var(--dor-gray);
}

.dorra-split .ds-img,
.dorra-split .ds-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dorra-split .ds-actions {
	margin-top: 18px;
}

.dorra-split.dor-bg--navy .dor-btn--primary {
	color: var(--dor-navy);
	background: var(--dor-gray);
	border-color: var(--dor-gray);
}

@media (min-width: 992px) {
	.dorra-split .ds-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 30px;
	}

	.dorra-split .ds-actions {
		margin-top: 0;
	}

	.dorra-split--media-left .ds-media {
		grid-column: 1 / 7;
		grid-row: 1;
		order: 0;
	}

	.dorra-split--media-left .ds-body {
		grid-column: 8 / 13;
		grid-row: 1;
		order: 0;
	}

	.dorra-split--media-right .ds-body {
		grid-column: 1 / 6;
		grid-row: 1;
		order: 0;
	}

	.dorra-split--media-right .ds-media {
		grid-column: 7 / 13;
		grid-row: 1;
		order: 0;
	}
}

.dorra-split .ds-media {
	position: relative;
	isolation: isolate;
}

.dorra-split .ds-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid rgba(var(--dor-navy-rgb), .28);
	border-radius: var(--dor-radius-lg);
	transform: translate(-14px, 14px);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.dorra-split--media-right .ds-media::before {
	transform: translate(14px, 14px);
}

.dorra-split.dor-bg--navy .ds-media::before {
	border-color: rgba(255, 255, 255, .3);
}

@media (min-width: 992px) {
	.dorra-split .ds-media::before {
		transform: translate(-22px, 22px);
	}

	.dorra-split--media-right .ds-media::before {
		transform: translate(22px, 22px);
	}

	.dorra-split .ds-media:hover::before {
		transform: translate(-12px, 12px);
	}

	.dorra-split--media-right .ds-media:hover::before {
		transform: translate(12px, 12px);
	}
}