.dkx-visual-inserted-media {
	box-sizing: border-box;
	display: block;
	margin: clamp(20px, 4vw, 48px) 0;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
	background: #02080d;
	border: 1px solid rgba(53, 184, 255, .42);
}

main > .dkx-visual-inserted-media {
	margin-left: auto;
	margin-right: auto;
	width: min(1200px, 90vw);
}

.dkx-visual-inserted-media img,
.dkx-visual-inserted-media video {
	background: #000;
	display: block;
	height: auto;
	max-height: 82vh;
	object-fit: contain;
	width: 100%;
}

.dkx-visual-inserted-media video {
	aspect-ratio: 16 / 9;
}

[data-dkx-media-slot] > .dkx-visual-inserted-media.is-media-slot {
	border: 0;
	height: 100%;
	margin: 0;
	width: 100%;
}

[data-dkx-media-slot] > .dkx-visual-inserted-media.is-media-slot img,
[data-dkx-media-slot] > .dkx-visual-inserted-media.is-media-slot video {
	height: 100%;
	max-height: none;
	object-fit: cover;
	width: 100%;
}

body.dkx-visual-editing .dkx-visual-inserted-media::after {
	background: #25d7c5;
	color: #00111c;
	content: "ADDED MEDIA";
	font: 900 9px/1 Inter, Arial, sans-serif;
	letter-spacing: .12em;
	padding: 7px 9px;
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 2;
}

@media (max-width: 600px) {
	.dkx-visual-inserted-media,
	main > .dkx-visual-inserted-media {
		margin-block: 22px;
		width: 100%;
	}
}