/* ======================================================================
   page-section.faq
   ====================================================================== */

.page-section.faq .section-wrap {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.page-section.faq .faq-wrap {
	padding-bottom: var(--padding-content);
}

.page-section.faq .faq-wrap .item {
	margin: 0;
	padding: 0 0.25em 0 0;
	border-bottom: solid 1px var(--ctx-border);
	transition: background .25s;
}

.page-section.faq .faq-wrap .item:first-child {
	border-top: solid 1px var(--ctx-border);
}

.page-section.faq .item h4 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	padding: 1em 0;
	color: var(--ctx-fg);
	cursor: pointer;
}

.page-section.faq .item h4 span {
	margin-right: 44px;
}

.page-section.faq .item h4::after {
	width: 24px;
	height: 24px;
	margin-right: 2px;
	flex-grow: 0;
	flex-shrink: 0;
	content: "";
	background: no-repeat center center transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.4 6.92 13.48 12 8.4 17.08 9.81 18.49 16.31 12 9.81 5.51 8.4 6.92'/%3E%3C/svg%3E");
	background-size: 24px 24px;
	transform: rotate(90deg);
	transition: transform .25s;
}

.page-section.faq .item.active h4::after {
	transform: rotate(270deg);
}

.page-section.faq .item .answer {
	color: var(--ctx-fg);
}

.js .page-section.faq .item .answer {
	display: none;
}




@media screen and (min-width: 1024px) {

	.page-section.faq .container {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--gap-columns);
		align-items: stretch;
	}
	
	.page-section.faq .section-wrap{ grid-column: 4 / span 6; }
	
}