/**
 * @section Aspect Ratios
 * Crop content to a specific ratio
 */

@layer kelp.utilities {
	iframe[class*="aspect-ratio"] {
		height: 100%;
		width: 100%;
	}

	[class*="aspect-ratio"] {
		--ratio: auto;
		aspect-ratio: var(--ratio);
		object-fit: cover;
	}

	.aspect-ratio-21x9 {
		--ratio: 21 / 9;
	}

	.aspect-ratio-16x9 {
		--ratio: 16 / 9;
	}

	.aspect-ratio-4x3 {
		--ratio: 4 / 3;
	}

	.aspect-ratio-3x2 {
		--ratio: 3 / 2;
	}

	.aspect-ratio-1x1 {
		--ratio: 1 / 1;
	}
}