/**
 * Inline SVG infographics (detki-svg-animation).
 * Раскладка и доступность. Анимации — из <style> поста / detki-svg-post-css в head.
 */

.entry-content .detki-svg-animation,
.entry-content .detki-svg-animation__frame {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 24px auto;
	overflow: visible;
}

.entry-content .detki-svg-animation__frame {
	aspect-ratio: 16 / 9;
	line-height: 0;
}

.entry-content .detki-svg-animation svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	overflow: visible;
}

/* Только если пользователь отключил анимации в ОС */
@media (prefers-reduced-motion: reduce) {
	.entry-content .detki-svg-animation svg * {
		animation: none !important;
		transition: none !important;
	}

	.entry-content .detki-svg-animation svg [stroke-dashoffset] {
		stroke-dashoffset: 0 !important;
	}

	.entry-content .detki-svg-animation svg .marker,
	.entry-content .detki-svg-animation svg #hero,
	.entry-content .detki-svg-animation svg #title-decor,
	.entry-content .detki-svg-animation svg #mask-path {
		opacity: 1 !important;
	}
}