/*!
* Components/XResponsive
*/

.x-responsive {
	--x-responsive-sizer-motion-duration: var(--x-comp-responsive-sizer-motion-duration,
			var(--x-sys-motion-duration-short4, 200ms));
	--x-responsive-sizer-motion-easing: var(--x-comp-responsive-sizer-motion-easing,
			var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
}

.x-responsive {
	display: flex;
	flex: 1 0 auto;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.x-responsive__content {
	flex: 1 0 0;
	max-width: 100%;
}

.x-responsive__sizer {
	flex: 1 0 0;
	padding-top: var(--x-aspect-ratio, 0);
	pointer-events: none;
	transition-duration: var(--x-responsive-sizer-motion-duration);
	transition-property: padding-top;
	transition-timing-function: var(--x-responsive-sizer-motion-easing);
}

.x-responsive__sizer ~ .x-responsive__content {
	margin-inline-start: -100%;
}

.x-responsive--ratio-1\/1 {
	--x-aspect-ratio: 100%;
}

.x-responsive--ratio-4\/3 {
	--x-aspect-ratio: 75%;
}

.x-responsive--ratio-16\/9 {
	--x-aspect-ratio: 56.25%;
}

.x-responsive--ratio-16\/10 {
	--x-aspect-ratio: 62.5%;
}

.x-responsive--ratio-21\/9 {
	--x-aspect-ratio: 42.8571428571%;
}