.cta {
	@apply block;
	&--round {
		@apply w-20 h-20;
		border-radius: 50%;
	}
	&--construction {
		@apply bg-construction;
	}
	&--lhoist {
		@apply bg-lhoistdark;
	}
	&--button-icon {
		@apply relative border-none cursor-pointer;

		text-decoration: none;
		transition: all 0.4s ease-in-out;
		&:after {
			@apply absolute w-10 h-10 z-20 left-1/2 top-1/2;
			content: "";
			transform: translate(-50%, -50%);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}
		&:hover {
			scale: 1.2;
		}
	}
	&--play {
		@apply p-3;
		&:after {
			@apply w-10 h-9;
			background-image: url("../../../img/icons/icon-play.svg");
			translate: 6px 1px;
		}
	}
	&--next {
		&:after {
			background-image: url("../../../img/icons/arrow-next.svg");
		}
	}
	&--previous {
		&:after {
			background-image: url("../../../img/icons/arrow-previous.svg");
		}
	}
	&--home {
		&:after {
			background-image: url("../../../img/icons/home.svg");
		}
	}
	&--back {
		&:after {
			background-image: url("../../../img/icons/icon-back.svg");
		}
	}
	&--close {
		&:after {
			background-image: url("../../../img/icons/icon-cross.svg");
		}
	}
	&--start {
		@apply text-5xl text-white p-8 py-4 flex items-center gap-6 h-fit;
		line-height: 0.4;

		span {
			@apply block  text-zuume;
		}
		&:after {
			@apply inline-block static;
			transform: none;
			background-image: url("../../../img/icons/arrow-start.svg");
		}
	}
}
.motion-button {
	@apply bg-transparent w-fit h-fit border-none;
}