.termineblock{
	height: 100vh;
	height: 60vh;
	display: grid;
	grid-template-columns: 33% 1fr;
	background-color: var(--wp--preset--color--ci-blue);

	h3{
		color: var(--wp--preset--color--offwhite);
		align-self: center;
		padding-left: 5vw;
		font-size: 3vw;
		font-weight: 700;
	}
}

.termine{
	background: var(--wp--preset--color--accent);
	display: flex;
	justify-content: center;
	align-items: center;
	container-type: size;
	position: relative;

	
	.slider{
		container-type: size;
		background-color: var(--wp--preset--color--ci-blue);
		width: 75%;
		height: auto;
		aspect-ratio: 1 / 1;
		scroll-snap-type: x mandatory;
		overflow-x: hidden;
		scroll-behavior: smooth;

		display: flex;
		position: relative;
		z-index: 1;
		
		a{
			
			line-height: 1.2;
			display: grid;
			grid-template-rows: 1fr 1fr 1fr auto;
			width: 100%;
			flex: 0 0 auto;
			scroll-snap-align: center;
			overflow: hidden;
			align-items: center;

			strong{
				padding: 2rem 2rem 0rem;
				font-size: calc((100cqw - 4rem) * 0.11);
				color: var(--wp--preset--color--offwhite);
				line-height: 1;
			}

			span{
				padding: 1rem 2rem 0;
				font-size: calc((85cqw - 4rem) * 0.11);
				color: var(--wp--preset--color--offwhite);
			}

			em{
				background: var(--wp--preset--color--offwhite);
				color: var(--wp--preset--color--ci-blue);
				margin:0;
				text-align: center;
				padding: 1rem;
				font-style: normal;
				font-size: 2em;
			}
		}

		&+.pager{
			position: absolute;
			inset: 48% 5%;
			display: flex;
			justify-content: space-between;

			button{
				display: block;
				aspect-ratio: 1 / 1;
				width: 3vw;
				height: 100%;
				border-radius: 0;
				border: 0;
				background-color: transparent;

				.st0 {
					fill: var(--wp--preset--color--ci-blue);
					transition: var(--maintrans);
				}

				&:hover{
					cursor: pointer;
					.st0 {
						fill: var(--wp--preset--color--dark);
					}
				}
			}
		}
	}
	
	@container (aspect-ratio > 1) { 
		.slider{
			height: 75%;
			width: auto;
		}
	}
}

@media screen and (max-width: 990px) {
	.termineblock{
		display: block;
		height: auto;
		padding: var(--mainpadding);
		background: var(--wp--preset--color--accent);

		h3{
			padding-left: 0;
			font-size: 2em;
			color: var(--wp--preset--color--ci-blue);
		}

		.termine{
			container-type: unset;
			flex-direction: column;

			.slider{
				width: 100%;
				aspect-ratio: unset;
				container-type: unset;

				a{
					strong{
						padding: var(--mainpadding) var(--mainpadding) 0;
						hyphens: auto;
					}

					span{
						padding: 0 var(--mainpadding);;
					}
				}

				&+.pager{

					position: relative;
					inset: unset;
					width: 100%;
					padding: var(--mainpadding);

					button{
						height: 3em;
						width: 3em;
					}
				}
			}
		}

	}	
}