.media {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	align-items: normal;
}

	.media .media__container {
		position: relative;
		width: max-content;
		height: max-content;
		max-width: 100%;
		max-height: 100%;
		aspect-ratio: var(--aspect-ratio-base);
	}

	.media.media--fluid .media__container {
		width: 100%;
		height: 100%;
	}

		.media.media--fluid .media__container.media-aspect-ratio {
			width: auto;
			height: auto;
		}


	.media .media__container-inner {
		position: relative;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}


	.media .media__item {
		object-fit: cover;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}



	/*** Position ***/
	.media .media__container {
		top: 0;
		left: 0;
		--position-offset-v: 0;
		--position-offset-h: 0;
		transform: translate(var(--position-offset-h), var(--position-offset-v));
	}

	.media.media--center .media__container {
		top: 50%;
		left: 50%;
		--position-offset-v: -50%;
		--position-offset-h: -50%;
	}

	.media.media--top .media__container {
		top: 0;
		--position-offset-v: 0;
	}

	.media.media--bottom .media__container {
		top: 100%;
		--position-offset-v: -100%;
	}

	.media.media--left .media__container {
		left: 0;
		--position-offset-h: 0;
	}

	.media.media--right .media__container {
		left: 100%;
		--position-offset-h: -100%;
	}


	/*** Focus ***/
	.media .media__container.media--contain{
		width: auto;
		height: auto;
	}

	.media .media__container.media--contain .media__container-inner {
		width: auto;
		height: auto;
		top: 0;
		left: 0;
		--focus-offset-v: 0;
		--focus-offset-h: 0;
		transform: translate(var(--focus-offset-h), var(--focus-offset-v));
	}

	.media .media__container.media--contain.media--focus-center .media__container-inner {
		top: 50%;
		left: 50%;
		--focus-offset-v: -50%;
		--focus-offset-h: -50%;
	}

	.media .media__container.media--contain.media--focus-top .media__container-inner {
		top: 0;
		--focus-offset-v: 0;
	}

	.media .media__container.media--contain.media--focus-bottom .media__container-inner {
		top: 100%;
		--focus-offset-v: -100%;
	}


	.media .media__container.media--contain.media--focus-bottom .media__container-inner {
		left: 0;
		--focus-offset-h: 0;
	}

	.media .media__container.media--contain.media--focus-bottom .media__container-inner {
		left: 100%;
		--focus-offset-h: -100%;
	}


*:has(> .media:not(.media--fluid)) {
	line-height: 0;
}