.spacer {
	position: relative;
	background-color: rgb(230, 230, 230);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	&::before {
		content: "";
		display: block;
		opacity: 0.2;
		width: 100%;
		text-align: center;
	}

	&.position-top,
	&.position-bottom {
		align-items: center;
	}

	&__extra-small {
		&::before {
			content: "Height: 30px Dekstop | 20px Mobile / Breakpoint: 768px";
		}
	}

	&__small {
		&::before {
			content: "Height: 60px Dekstop | 40px Mobile / Breakpoint: 768px";
		}
	}

	&__normal {
		&::before {
			content: "Height: 75px Dekstop | 50px Mobile / Breakpoint: 768px";
		}
	}

	&__large {
		&::before {
			content: "Height: 100px Dekstop | 80px Mobile / Breakpoint: 768px";
		}
	}

	&__huge {
		&::before {
			content: "Height: 200px Dekstop | 120px Mobile / Breakpoint: 768px";
		}
	}
}