// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;

	&::before {
		display: block;
		content: "";
	}

	.embed-responsive-item,
	iframe,
	embed,
	object,
	video {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

.embed-responsive-21by9 {
	&::before {
		padding-top: percentage((9 / 21));
	}
}

.embed-responsive-16by9 {
	&::before {
		padding-top: percentage((9 / 16));
	}
}

.embed-responsive-4by3 {
	&::before {
		padding-top: percentage((3 / 4));
	}
}

.embed-responsive-1by1 {
	&::before {
		padding-top: percentage((1 / 1));
	}
}