/**
 * Layout: Tijd om in te checken
 * Slug: check_in
 */

 .hero_hart-layout + .check_in-layout,
 .pin-spacer:has(.hero_hart-layout) + .check_in-layout {
	--pk-heading-color: #ffffff;
	background-color: var(--fdhl-blue-light);
	color: #ffffff;
 }

.check_in-layout {
    padding-block: max(4rem, calc(7 * var(--su)));
	background-color: rgba(199, 234, 228, 0.5);
}

.check_in-layout.bg-blue {
	--pk-heading-color: #ffffff;
	background-color: var(--fdhl-blue-light);
	color: #ffffff;
}
.check_in-layout.bg-blue .content-col .pk-button-group {
	--button-bg-1: var(--fdhl-darkblue);
	--button-bg-1-hover: var(--fdhl-darkblue-dark);
}

.check_in-layout .pk-grid-container {
	row-gap: max(3rem, calc(3 * var(--su)));
}

.check_in-layout canvas {
	width: 100%;
	height: auto;
	aspect-ratio: 501/542;
}

.check_in-layout .pk-button-group {
	margin-top: max(1.5rem, calc(2 * var(--su)));
}
.pin-spacer:has(.hero_hart-layout) + .check_in-layout .content-col .pk-button-group {
	--button-bg-1: var(--fdhl-darkblue);
	--button-bg-1-hover: var(--fdhl-darkblue-dark);
}

.check_in-layout .image-col .pk-button-group {
	justify-content: end;
}

@media screen and (min-width: 993px) {
	.check_in-layout .image-col {
		margin-top: max(2rem, calc(3.125 * var(--su)));
	}
}

@media screen and (max-width: 767px) {
	.check_in-layout .content-col .pk-text {
		padding-right: 1.5rem;
	}
}