/* BLOCK TYPE 20 - textblock */
/* BLOCK TYPE 20 - textblock */
/* BLOCK TYPE 20 - textblock */

.block_type_20 {
	position: relative;
	background-color: lightgray;
	color: black;
	padding-top: 5vw;
	padding-bottom: 5vw;
	padding-left: 10vw;
	padding-right: 10vw;

	display: grid;
	grid-template-columns: 4fr 1fr 4fr;
	grid-template-rows: auto auto auto;
}
.block_type_20::before {
	content: '20';
	background-color: #84de02;
}
.block_type_20.theme_licht {
	background-color: var(--bg-light);
	color: var(--txt-light);
}
.block_type_20.theme_donker {
	background-color: var(--bg-dark);
	color: var(--txt-dark);
}

.block_type_20 .number {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	color: var(--txt-gray);

	opacity: 0;
	transform: translateX(-150px);
	transition: 0.5s ease-in-out;
	transition-delay: 0.25s;
}
.block_type_20 .heading {
	grid-column: 1 / 2;
	grid-row: 2 / 3;

	opacity: 0;
	transform: translateX(-150px);
	transition: 0.5s ease-in-out;
	transition-delay: 0.25s;
}
.block_type_20 .text {
	grid-column: 3 / 4;
	grid-row: 3 / 4;

	opacity: 0;
	transform: translateX(150px);
	transition: 0.5s ease-in-out;
	transition-delay: 0.5s;
}
.block_type_20 .text span {
	font-weight: 600;
	border-bottom: 4px solid var(--clr-magenta-100);
}

.block_type_20.into-view .number,
.block_type_20.into-view .heading {
	transform: translateX(150px);
	opacity: 1;
}
.block_type_20.into-view .text {
	transform: translateX(-150px);
	opacity: 1;
}

@media (max-width: 1000px) {
	.block_type_20 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		padding-top: 10vw;
		padding-bottom: 10vw;
		padding-left: 5vw;
		padding-right: 5vw;
	}

	.block_type_20 .number,
	.block_type_20 .heading{
		padding-right: 10vw;
	}

	.block_type_20 .text{
		padding-left: 10vw;
	}

	.block_type_20 .number,
	.block_type_20 .heading,
	.block_type_20 .text {
		grid-column: 1 / -1;
	}

	.block_type_20.into-view .number,
	.block_type_20.into-view .heading,
	.block_type_20.into-view .text {
		transform: translateX(0px);
	}
}