.atlatszo-yt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 992px) {
	.atlatszo-yt-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.atlatszo-yt-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * A sötét, teljes képernyős háttér önálló elem (nem a .atlatszo-yt-modal
 * gyereke), mert a .centered class transform-ot állít be a videó-dobozon,
 * ami saját containing blockot hozna létre a fixed pozíciós gyerekeknek.
 */
.atlatszo-yt-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
}

.atlatszo-yt-modal-overlay.atlatszo-yt-modal-active {
	display: block;
}

/*
 * A pozicionálást (fixed + középre igazítás) a sablonból jövő .pf és
 * .centered class végzi, itt csak a videó-doboz méretét és rétegrendjét
 * állítjuk be.
 */
.atlatszo-yt-modal {
	display: none;
	width: 90%;
	max-width: 900px;
	z-index: 100001;
}

.atlatszo-yt-modal.atlatszo-yt-modal-active {
	display: block;
}

.atlatszo-yt-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.atlatszo-yt-modal-video {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.atlatszo-yt-modal-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

body.atlatszo-yt-modal-open {
	overflow: hidden;
}