.accordion {
	list-style: none;
	margin: 0;
	padding: 0;

	.accordion-item {
		list-style: none;

		.accordion-item--toggler {
			cursor: pointer;
		}
		.accordion-item--content {
			max-height: 0;
			overflow: hidden;
			transition: max-height .5s cubic-bezier(0, 1, 0, 1);
		}
		&.active {
			.accordion-item--content {
				max-height: 1000px;
				transition: max-height 1s;
			}
		}
	}
}
.faq-list {
	--btn-size: 30px;
	--toggler-padding: 15px 25px;
	--content-padding: 10px 25px 20px;

	list-style: none;
	margin: 0;
	padding: 0;

	.faq-list-item {
		list-style: none;
		border: 1px solid #000000;
		border-radius: 3px;
		background: #fff;

		& + & {
			margin-top: -1px;
		}
		.faq-list-item--toggler {
			font-size: clamp(16px, 2vw, 25px);
			font-weight: 400;
			display: flex;
			justify-content: space-between;
			gap: 20px;
			padding: var(--toggler-padding);
			cursor: pointer;
			align-items: center;
		}
		.faq-list-item--title {

		}
		.faq-list-item--btn {
			background: none;
			border: none;
			outline: none!important;
			position: relative;
			width: var(--btn-size);
			height: var(--btn-size);
			padding: 0;
			cursor: pointer;
			transition: transform .5s;

			&:before,
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: calc(var(--btn-size) / 1.66);
				height: 2px;
				border-radius: 2px;
				transform: translate(-50%, -50%);
				background: #000000;
			}
			&:after {
				transform: translate(-50%, -50%) rotate(90deg);
			}
		}
		.faq-list-item--content-inner {
			padding: var(--content-padding);
			font-size: clamp(14px, 2vw, 16px);
			font-weight: 400;
		}
		&.active {
			.faq-list-item--btn {
				transform: rotate(135deg);
			}
		}
	}
	@media (width < 768px) {
		--btn-size: 26px;
		--toggler-padding: 10px 15px;
		--content-padding: 5px 15px 10px;
	}
}