@mixin lazy-anim {
	position: relative;
	background-color: #ccc;

	&:after,
	&:before {
		position: absolute;
		top: calc(50% - 2rem);
		left: calc(50% - 2rem);
		width: 40px;
		height: 40px;
		border: 2px solid transparent;
		border-radius: 50%;
		border-top-color: $primary-color;
		border-image: none;
		content: '';
	}

	&:before {
		-webkit-animation: spin 1s infinite ease;
		animation: spin 1s infinite ease;
		z-index: 4;
	}

	&:after {
		-webkit-animation: spin .5s infinite linear;
		animation: spin .5s infinite linear;
		z-index: 5;
	}

	&.loaded:after,
	&.loaded:before {
		display: none;
	}
}

@mixin aspect-ratio($width, $height) {
	position: relative;

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