/* Block: DD — Beeld */

.dd-media {
	padding: 40px 0;
}

.dd-media__container {
	max-width: var(--dd-maxw);
	margin: 0 auto;
	padding-left: var(--dd-pad);
	padding-right: var(--dd-pad);
}

.dd-media__container--reading {
	max-width: 1080px;
}

.dd-media__frame {
	border-radius: 18px;
	box-shadow: var(--dd-shadow-card);
}

/* Grid / dot-grid overlay variant */
.dd-media__grid {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--dd-ink-hover), var(--dd-ink));
}

.dd-media__grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 32px 32px;
}

.dd-media__label {
	position: relative;
	font-family: var(--dd-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.05em;
}

@media (max-width: 900px) {
	.dd-media {
		padding: 28px 0;
	}

	.dd-media__frame,
	.dd-media__grid {
		border-radius: 14px;
	}
}