.wp-block-wrd-text-grid {
	view-timeline: --wp-block-wrd-text-grid y;
}

.wp-block-wrd-text-grid:not(.is-style-dark) {
	background-color: #fff;
}

.wp-block-wrd-text-grid__content {
	max-width: none;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fill, minmax(35ch, 1fr));
}

.wp-block-wrd-text-grid__content > p,
.wp-block-wrd-text-grid__content > .wp-block-heading {
	grid-column: 1/-1;
	max-width: 60ch;
	margin: 0;
}

.wp-block-wrd-text-grid__content > p {
	position: relative;
	bottom: 1.5rem;
}

.wp-block-wrd-text-grid__content .wp-block-heading {
	margin-top: 0;
}

.wp-block-wrd-text-grid__icon {
	display: none;
	position: absolute;
	top: -4%;
	z-index: 20;
	left: calc(var(--scaffold__right));
	width: calc(var(--scaffold__padding) + 6px);
	height: auto;
	padding-bottom: 5px;
	fill: none;
	stroke: currentColor;
	stroke-width: 4;

	animation: wp-block-wrd-text-grid__icon ease-in-out;
	animation-timeline: --wp-block-wrd-text-grid;
	animation-range: cover;
}

.wp-block-wrd-text-grid__block {
	--wp-block-wrd-text-grid__block_size: 2.5rem;
	--wp-block-wrd-text-grid__block_gap: 0.5rem;

	position: absolute;
	width: var(--wp-block-wrd-text-grid__block_size);
	height: 100%;

	animation: wp-block-wrd-text-grid__block__grow ease-in-out;
	animation-timeline: --wp-block-wrd-text-grid;
	animation-range: cover;
}

.wp-block-wrd-text-grid__block--orange {
	bottom: 0;
	left: calc(
		var(--scaffold__padding) - var(--wp-block-wrd-text-grid__block_size) -
			var(--wp-block-wrd-text-grid__block_gap)
	);
	transform-origin: bottom;
	background: var(--color__orange_500);
	max-height: calc(var(--wp-block-wrd-text-grid__block_size) * 3);
}

.wp-block-wrd-text-grid__block--blue {
	top: 0;
	right: calc(
		var(--scaffold__padding) - var(--wp-block-wrd-text-grid__block_size) -
			var(--wp-block-wrd-text-grid__block_gap)
	);
	transform-origin: top;
	background: var(--color__aqua_500);
	max-height: calc(var(--wp-block-wrd-text-grid__block_size) * 6.5);
}

.wp-block-wrd-text-grid.is-style-dark .wp-block-wrd-text-grid__block--blue {
	background: var(--color__blue_500);
}

@media (min-width: 650px) {
	.wp-block-wrd-text-grid__block {
		--wp-block-wrd-text-grid__block_size: 2.5rem;
		--wp-block-wrd-text-grid__block_gap: 2rem;
	}
}

@media (min-width: 768px) {
	.wp-block-wrd-text-grid__block {
		--wp-block-wrd-text-grid__block_size: 3rem;
		--wp-block-wrd-text-grid__block_gap: 1.5rem;
	}
}

@media (min-width: 1200px) {
	.wp-block-wrd-text-grid__icon {
		display: block;
	}
	.wp-block-wrd-text-grid__block {
		--wp-block-wrd-text-grid__block_size: 3.5rem;
		--wp-block-wrd-text-grid__block_gap: 3rem;
	}
}

@keyframes wp-block-wrd-text-grid__icon {
	from {
		transform: translateY(-20%);
	}
	to {
		transform: translateY(20%);
	}
}

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