@keyframes conceal {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

@keyframes reveal {
	0% {
		transform: scaleX(1);
	}
	100% {
		transform: scaleX(0);
	}
}

.centerpiece {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--s-lg);

	> h1 {
		text-align: center;
	}

	> div {
		width: 100%;
		margin-top: var(--s-sm);

		@media (min-width: 768px) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: var(--s-md);
		}

		> img {
			border-top-left-radius: 222px;
			border-top-right-radius: 222px;
			border: var(--s-xs) solid var(--c-br-lt);

			@media (max-width: 767px) {
				display: none;
				position: absolute;
				z-index: 2;
				bottom: calc(-1 * var(--s-sm));
				right: var(--s-sm);;
				width: 25%;
			}

			@media (min-width: 768px) {
				width: 27.5%;
				height: auto;
			}
		}

		> btw-fader {
			position: relative;
			display: block;
			width: 100%;

			@media (min-width: 768px) {
				width: calc(45% - var(--s-md));
			}

			> ul {
				position: relative;
				width: 100%;
				aspect-ratio: 1 / 1.2;

				> li {
					position: absolute;
					opacity: 0;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					transition: opacity 0s;
					transition-delay: 0.5s;

					&:after {
						content: "";
						position: absolute;
						top: -1px;
						right: -1px;
						bottom: -1px;
						left: -1px;
						background-color: var(--c-white);
						transform-origin: left;
						animation: conceal 0.5s ease-in-out forwards;
					}

					&.is-active {
						opacity: 1;

						&:after {
							transform-origin: right;
							animation: reveal 0.5s ease-in-out forwards;
							animation-delay: 0.5s;
						}
					}

					> img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
}