// allows a better control over the embedded elements heights like iframes
// by specifing a padding-top in percentage to the .#{$project-prefix}embed::before we can have
// responsive iframes respecting the aspect ratio defined by the padding-top
// the padding-top can be expressed in pixels or any other unit as well, in this case, hence when
// we don't need the height to be related to the element's width, we can specify just the height property instead.
.#{$project-prefix}embed {
	position: relative;
	&::before {
		display: block;
		content: '';
	}
	.#{$project-prefix}embed-inner,
	iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}