.wp-block-wrd-text-callout {
	--wp-block-wrd-text-callout__padding: 3rem;

	view-timeline: --wp-block-wrd-text-callout y;
}

.wp-block-wrd-text-callout__scaffold {
	padding-top: var(--wp-block-wrd-text-callout__padding);
	padding-bottom: var(--wp-block-wrd-text-callout__padding);
}

.wp-block-wrd-text-callout__block {
	display: none;
	position: absolute;
	height: 2.5rem;

	animation: wp-block-wrd-text-callout__block ease-in-out;
	animation-timeline: --wp-block-wrd-text-callout;
	animation-range: cover;
}

.wp-block-wrd-text-callout__block--1 {
	background: var(--color__aqua_500);
	top: var(--wp-block-wrd-text-callout__padding);
	left: 0;
	transform-origin: left;
	width: calc(var(--scaffold__padding) - 1rem);
}

.wp-block-wrd-text-callout__block--2 {
	background: var(--color__orange_500);
	top: calc(var(--wp-block-wrd-text-callout__padding) + 3rem);
	right: 0;
	transform-origin: right;
	width: calc(var(--scaffold__padding) * 0.33);
}

.wp-block-wrd-text-callout__static {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200vw;
	height: 200vh;

	animation: wp-block-wrd-text-callout__static ease-in-out;
	animation-timeline: --wp-block-wrd-text-callout;
	animation-range: cover;
}

@media (min-width: 768px) {
	.wp-block-wrd-text-callout {
		--wp-block-wrd-text-callout__padding: 4rem;
	}

	.wp-block-wrd-text-callout__block {
		display: block;
	}

	.wp-block-wrd-text-callout__block--1 {
		width: calc(var(--scaffold__padding) - 2rem);
	}

	.wp-block-wrd-text-callout__static {
		grid-column-start: 3;
		left: 0;
	}
}

@media (min-width: 1024px) {
	.wp-block-wrd-text-callout {
		--wp-block-wrd-text-callout__padding: 6rem;
	}

	.wp-block-wrd-text-callout__block {
		height: 3rem;
	}

	.wp-block-wrd-text-callout__block--1 {
		width: calc(var(--scaffold__padding) - 3rem);
	}
}

@keyframes wp-block-wrd-text-callout__block {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes wp-block-wrd-text-callout__static {
	from {
		transform: translateY(0%);
	}
	to {
		transform: translateY(2%);
	}
}