[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"]) ) > * > img,
[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"]) ) > * > iframe,
[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"]) ) > ::slotted( img, iframe )
	{
		display: block;
		min-height: 100%;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

[cs-ratio]:is( :not([cs-ratio="none"])[cs-ratio~="list"] ) > * > img,
[cs-ratio]:is( :not([cs-ratio="none"])[cs-ratio~="list"] ) > * > iframe,
[cs-ratio]:is( :not([cs-ratio="none"])[cs-ratio~="list"] ) > ::slotted( img, iframe )
	{
		min-width: 100%;
		width: 100%;
	}


[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"]) ) > *
	{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;		
	}

[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"]) )
	{
		position: relative;
	}

[cs-ratio]:is( [cs-ratio~="landscape-16-9"] )
	{
		--padding-ratio: 56.25%;
	}

[cs-ratio]:is( [cs-ratio~="landscape-21-9"] )
	{
		--padding-ratio: 42.85%;
	}

[cs-ratio]:is( [cs-ratio~="landscape-32-9"] )
	{
		--padding-ratio: 28.125%;
	}

[cs-ratio]:is( [cs-ratio~="landscape-64-9"] )
	{
		--padding-ratio: 14.0625%;
	}

[cs-ratio]:is( [cs-ratio~="landscape-3-4"] ),
[cs-ratio]:is( [cs-ratio~="landscape-4-3"] )
	{
		--padding-ratio: 75%;
	}

[cs-ratio]:is( [cs-ratio~="portret-16-9"] ),
[cs-ratio]:is( [cs-ratio~="portrait-16-9"] )
	{
		--padding-ratio: 178.25%;
	}

[cs-ratio]:is( [cs-ratio~="portret-4-3"] ),
[cs-ratio]:is( [cs-ratio~="portrait-4-3"] )
	{
		--padding-ratio: 133%;
	}

[cs-ratio]:is( [cs-ratio~="square"] )
	{
		--padding-ratio: 100%;
	}
/*
[cs-ratio~="list"]
	{
		padding-left: var( --padding-ratio );
	}
*/
[cs-ratio] /*:not( [cs-ratio~="list" ] )*/
	{
		padding-bottom: var( --padding-ratio );
	}

[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"])/*:not([cs-ratio~="list"])*/ )
	{
		height: 0;
	}

/*
[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"])[cs-ratio~="list"] )
	{
		width: 0;
	}
*/

[cs-ratio]:is( :not([cs-ratio=""]):not([cs-ratio="none"]) ) > *
	{
		position: absolute;
	}