/*
.aspect-ratio:not(iframe):not(.aspect-ratio--masked) {
	width: calc(100vh / (var(--aspect-ratio))) !important;
	height: calc(100vw / (var(--aspect-ratio))) !important;
}
*/

.aspect-ratio:not(.aspect-ratio--masked) {
	width: calc(100vh / (var(--aspect-ratio))) !important;
	height: calc(100vw / (var(--aspect-ratio))) !important;
}


.aspect-ratio--masked::before {
	content: '';
	float: left;
	padding-top: calc(100% * (var(--aspect-ratio)));
}

.aspect-ratio--masked::after {
	content: '';
	display: block;
	clear: both;
}







.aspect-ratio--1-1:not(.aspect-ratio--masked), .aspect-ratio--1-1.aspect-ratio--masked::before {
	/*aspect-ratio: 1 / 1;*/
	--aspect-ratio: var(--aspect-ratio--1-1);
}

.aspect-ratio--4-3:not(.aspect-ratio--masked), .aspect-ratio--4-3.aspect-ratio--masked::before {
	/*aspect-ratio: 4 / 3;*/
	--aspect-ratio: var(--aspect-ratio--4-3);
}

.aspect-ratio--3-2:not(.aspect-ratio--masked), .aspect-ratio--3-2.aspect-ratio--masked::before {
	/*aspect-ratio: 3 / 2;*/
	--aspect-ratio: var(--aspect-ratio--3-2);
}

.aspect-ratio--21-9:not(.aspect-ratio--masked), .aspect-ratio--21-9.aspect-ratio--masked::before {
	/*aspect-ratio: 21 / 9;*/
	--aspect-ratio: var(--aspect-ratio--21-9);
}

.aspect-ratio--16-9:not(.aspect-ratio--masked), .aspect-ratio--16-9.aspect-ratio--masked::before {
	/*aspect-ratio: 16 / 9;*/
	--aspect-ratio: var(--aspect-ratio--16-9);
}

.aspect-ratio--195-9:not(.aspect-ratio--masked), .aspect-ratio--195-9.aspect-ratio--masked::before {
	/*aspect-ratio: 19.5 / 9;*/
	--aspect-ratio: var(--aspect-ratio--195-9);
}


.aspect-ratio:not(.aspect-ratio--masked),
.aspect-ratio--landscape:not(.aspect-ratio--masked),
.aspect-ratio.aspect-ratio--masked::before,
.aspect-ratio--landscape.aspect-ratio--masked::before {
	--aspect-ratio--1-1: 1 / 1;
	--aspect-ratio--4-3: 3 / 4;
	--aspect-ratio--3-2: 2 / 3;
	--aspect-ratio--21-9: 9 / 21;
	--aspect-ratio--16-9: 9 / 16;
	--aspect-ratio--195-9: 9 / 19.5;
}


.aspect-ratio--portrait:not(.aspect-ratio--masked),
.aspect-ratio--portrait.aspect-ratio--masked::before {
	--aspect-ratio--1-1: 1 / 1;
	--aspect-ratio--4-3: 4 / 3;
	--aspect-ratio--3-2: 3 / 2;
	--aspect-ratio--21-9: 21 / 9;
	--aspect-ratio--16-9: 16 / 9;
	--aspect-ratio--195-9: 19.5 / 9;
}
