/* stylelint-disable */
@define-mixin aspect-ratio-landscape $width: 16, $height: 9 {
	position: relative;
	overflow: hidden;

	&::before {
		display: block;
		content: "";
		width: 100%;
		padding-top: calc(($height / $width) * 100%);
	}

	& > .inner-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		& > .vid,
		& > img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
        	height: auto;
		}
	}
}

/* Set an icon to element. */
@define-mixin aspect-ratio-portrait $width: 3, $height: 4 {
	position: relative;
	overflow: hidden;

	&::before {
		display: block;
		content: "";
		width: 100%;
		padding-top: calc(($height / $width) * 100%);
	}

	& > .inner-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		& > .vid,
		& > img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: auto;
			max-width: none;
			height: 100%;
		}
	}
}

/* Set an icon to element. */
@define-mixin icon $icon, $font-weight: normal, $font-size: 1.5rem,
	$font-family: var(--font-icon) {
	display: inline-flex;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	line-height: 1;
	padding: 0.25rem;
	margin-right: 5px;

	&::before {
		position: relative;
		margin-right: 5px;
		margin-left: 5px;
		content: $icon;
		font-size: $font-size;
		font-family: $font-family;
		font-weight: $font-weight;
		width: 1em;
		display: inline-block;
	}
	@content;
}
/* stylelint-enable */