//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// responsive-media module
// Caters for video/slideshow dimensions and aspect ratios across various viewports/widths
//
// Content:
// - Responsive video embeds
// - Responsive image
//--------------------------------------------------------------------------------------------------------------------------------------------------------------


@import '_globals.scss';
@import '_print.scss';


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// Responsive video embeds
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
.uikit-responsive-media-vid {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: uikit-space( 0.5 );

	> .uikit-responsive-media-vid__item {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		border: 0;
	}

	&.uikit-responsive-media-vid--16x9 {
		padding-bottom: 56.25%; // 16/9
	}

	&.uikit-responsive-media-vid--4x3 {
		padding-bottom: 75%; // 4/3
	}
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// Responsive image
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
.uikit-responsive-media-img {
	max-width: 100%;
}

//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// responsive-media module
// Caters for video/slideshow dimensions and aspect ratios across various viewports/widths
//
// Content:
// - Responsive video embeds
// - Responsive image
//--------------------------------------------------------------------------------------------------------------------------------------------------------------


@import '_globals.scss';
@import '_print.scss';


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// Responsive video embeds
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
.uikit-responsive-media-vid {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: uikit-space( 0.5 );

	> .uikit-responsive-media-vid__item {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		border: 0;
	}

	&.uikit-responsive-media-vid--16x9 {
		padding-bottom: percentage(9/16); // 16:9
	}

	&.uikit-responsive-media-vid--4x3 {
		padding-bottom: percentage(3/4); // 4:3
	}
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// Responsive image
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
.uikit-responsive-media-img {
	max-width: 100%;
}

Use the percentage() function instead of magic numbers
Use the percentage() function instead of magic numbers
