/*
	ASPECT RATIOS
*/

.[[@use prefix]]aspect-ratio {
	height: 0;
	position: relative;
}

.[[@use prefix]]aspect-ratio--16x9 { padding-bottom: 56.25%; }
.[[@use prefix]]aspect-ratio--9x16 { padding-bottom: 177.77%; }

.[[@use prefix]]aspect-ratio--4x3 { padding-bottom: 75%; }
.[[@use prefix]]aspect-ratio--3x4 { padding-bottom: 133.33%; }

.[[@use prefix]]aspect-ratio--6x4 { padding-bottom: 66.6%; }
.[[@use prefix]]aspect-ratio--4x6 { padding-bottom: 150%; }

.[[@use prefix]]aspect-ratio--8x5 { padding-bottom: 62.5%; }
.[[@use prefix]]aspect-ratio--5x8 { padding-bottom: 160%; }

.[[@use prefix]]aspect-ratio--7x5 { padding-bottom: 71.42%; }
.[[@use prefix]]aspect-ratio--5x7 { padding-bottom: 140%; }

.[[@use prefix]]aspect-ratio--1x1 { padding-bottom: 100%; }

.[[@use prefix]]aspect-ratio--object {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

[[@responsive]]
	.[[@use prefix]]aspect-ratio-[[@screen-size]] {
		height: 0;
		position: relative;
	}

	.[[@use prefix]]aspect-ratio--16x9-[[@screen-size]] { padding-bottom: 56.25%; }
	.[[@use prefix]]aspect-ratio--9x16-[[@screen-size]] { padding-bottom: 177.77%; }

	.[[@use prefix]]aspect-ratio--4x3-[[@screen-size]] { padding-bottom: 75%; }
	.[[@use prefix]]aspect-ratio--3x4-[[@screen-size]] { padding-bottom: 133.33%; }

	.[[@use prefix]]aspect-ratio--6x4-[[@screen-size]] { padding-bottom: 66.6%; }
	.[[@use prefix]]aspect-ratio--4x6-[[@screen-size]] { padding-bottom: 150%; }

	.[[@use prefix]]aspect-ratio--8x5-[[@screen-size]] { padding-bottom: 62.5%; }
	.[[@use prefix]]aspect-ratio--5x8-[[@screen-size]] { padding-bottom: 160%; }

	.[[@use prefix]]aspect-ratio--7x5-[[@screen-size]] { padding-bottom: 71.42%; }
	.[[@use prefix]]aspect-ratio--5x7-[[@screen-size]] { padding-bottom: 140%; }

	.[[@use prefix]]aspect-ratio--1x1-[[@screen-size]] { padding-bottom: 100%; }

	.[[@use prefix]]aspect-ratio--object-[[@screen-size]] {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
[[/@responsive]]