.flex-layout.faq-layout {
	--faq-box-radius: max(0.75rem, calc(0.75 * var(--su)));
	--faq-box-padding-block: max(0.875rem, calc(1 * var(--su)));
	--faq-box-padding-inline: max(1.25rem, calc(1.375 * var(--su)));
	--faq-box-gap: max(0.75rem, calc(0.875 * var(--su)));
	--faq-icon-size: max(1.125rem, calc(1.125 * var(--su)));
	--faq-icon-thickness: max(0.25rem, calc(0.25 * var(--su)));
	--faq-icon-radius: max(0.5px, calc(0.03125 * var(--su)));
	--faq-title-size: max(1.25rem, calc(1.5625 * var(--su)));
	--faq-line-color: var(--gijs-grijs);
	--faq-text-color: var(--gijs-grijs);
	--faq-open-bg: var(--gijs-grijs);
	--faq-open-text: var(--gijs-beige);
}

.flex-layout.faq-layout .faq-titel {
	margin-block-end: max(2rem, calc(3 * var(--su)));
	text-align: center;
	color: var(--faq-text-color);
}

.flex-layout.faq-layout .faq-titel > *:last-child {
	margin-bottom: 0;
}

.flex-layout.faq-layout .faq-titel h1,
.flex-layout.faq-layout .faq-titel h2,
.flex-layout.faq-layout .faq-titel h3 {
	color: var(--faq-text-color);
}

.flex-layout.faq-layout .gijs-info-blocks-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--faq-box-gap);
}

.flex-layout.faq-layout .gijs-info-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	cursor: pointer;
	padding: var(--faq-box-padding-block) var(--faq-box-padding-inline);
	border: 1px solid var(--faq-line-color);
	border-radius: var(--faq-box-radius);
	color: var(--faq-text-color);
	background-color: transparent;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.flex-layout.faq-layout .gijs-info-box.open {
	border-color: var(--faq-open-bg);
	background-color: var(--faq-open-bg);
	color: var(--faq-open-text);
}

.flex-layout.faq-layout .gijs-info-box .box-title {
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--faq-box-padding-inline);
	font-family: var(--pk-text-font-family);
	font-size: var(--faq-title-size);
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.06em;
	color: inherit;
}

.flex-layout.faq-layout .gijs-info-box .icon {
	position: relative;
	flex-shrink: 0;
	width: var(--faq-icon-size);
	height: var(--faq-icon-size);
}

.flex-layout.faq-layout .gijs-info-box .icon span {
	display: block;
	position: absolute;
	width: 100%;
	height: var(--faq-icon-thickness);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	transform-origin: center;
	border-radius: var(--faq-icon-radius);
	background-color: currentColor;
	transition: transform 300ms ease-in-out;
}

.flex-layout.faq-layout .gijs-info-box .icon span:nth-child(2) {
	transform: rotate(90deg);
}

.flex-layout.faq-layout .gijs-info-box.open .icon span:nth-child(2) {
	transform: rotate(180deg);
}

.flex-layout.faq-layout .gijs-info-box .gijs-info-inner {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.flex-layout.faq-layout .gijs-info-box.open .gijs-info-inner {
	grid-template-rows: 1fr;
	padding-block-start: max(0.5rem, calc(0.5 * var(--su)));
}

.flex-layout.faq-layout .gijs-info-box .gijs-info-content {
	overflow: hidden;
	font-size: max(0.875rem, calc(0.875 * var(--su)));
}

.flex-layout.faq-layout .gijs-info-box .gijs-info-content > *:last-child {
	margin-bottom: 0;
}