.collectionFAQ {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
	gap: 70px;
}
	.collectionFAQ_categories {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
		width: 300px;
		position: sticky;
		top: 150px;
	}
		.collectionFAQ_category{
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;
			padding: 10px 20px;
			border-left: 1px solid var(--color-gold);
			background: #eee;
			color: var(--color-1);
			position: relative;

			transition: all .2s ease-in-out;

			&::before{
				content: "";
				height: 100%;
				width: 5px;
				background: var(--color-gold);
				position: absolute;
				left: -3px;
				top: 0;
				opacity: 0;

				transition: opacity .2s ease-in-out;
			}

			&:hover{
				background: var(--color-gold);
				color: #fff;
			}

			&.active::before{
				opacity: 1;
			}
		}
			.collectionFAQ_category-title{
				font-family: var(--font-2);
			}
	.collectionFAQ_items{
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		gap: 50px;
    	padding-top: 5px;
	}
		.collectionFAQ_items-category{
			display: flex;
			flex-direction: column;
			gap: 20px;
			scroll-margin-top: 150px;
		}
			.collectionFAQ_items-category-title{
			}
			.collectionFAQ_items-category-items{
				display: flex;
				flex-direction: column;
			}
				.collectionFAQ_item {
					display: flex;
					flex-direction: column;
					width: 100%;
					scroll-margin-top: 150px;

					transition: padding .3s ease-in-out;

					&:not(:last-child){
						border-bottom: 1px solid rgba(0, 0, 0, 0.15);
					}
				}
					.collectionFAQ_item-header {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 30px;
						padding: 30px 20px;
						cursor: pointer;
					}
						.collectionFAQ_item-title {
							flex-grow: 1;
							font-size: 20px;
							font-weight: 500;
						}
						.collectionFAQ_item-arrow {
							flex-shrink: 0;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							width: 30px;
							height: 30px;
							font-size: 12px;
							color: var(--color-gold);

							transition: transform .3s ease-in-out;
						}
					.collectionFAQ_item-body {
						display: none;
						padding: 10px 20px 20px 20px;
					}
						.collectionFAQ_item-body-content {
							display: flex;
							flex-direction: row;
							gap: 40px;
						}
							.collectionFAQ_item-body-left{
								flex-grow: 1;
								display: flex;
								flex-direction: column;
								gap: 20px;
							}
								.collectionFAQ_item-rate{
									font-weight: bold;
									font-size: 16px;
								}
								.collectionFAQ_item-text{
									width: 100%;
								}
								.collectionFAQ_item-pdfs{
									display: flex;
									flex-direction: column;
									gap: 5px;
									width: 100%;
									max-width: 500px;
								}
									.collectionFAQ_item-pdf{
									}
							.collectionFAQ_item-body-right{
								flex-shrink: 0;
								width: 45%;
							}
								.collectionFAQ_item-image{
									display: block;
									width: 100%;
									position: relative;
									cursor: pointer;

									&[data-mode="cover"]{
										height: 100%;
									}
									&[data-mode="cover"]{
										min-height: 300px;
									}
								}

.collectionFAQ_item.active{

	&:not(:first-child){
		padding-top: 20px;
	}
	&:not(:last-child){
		padding-bottom: 40px;
	}
	& .collectionFAQ_item-arrow {
		transform: rotate(90deg);
	}
}

@media (max-width: 1280px) {

	.collectionFAQ {
		gap: 50px;
	}
	.collectionFAQ_categories {
		width: 240px;
	}

}

@media (max-width: 1024px) {

	.collectionFAQ{
		flex-direction: column;
	}
	.collectionFAQ_categories {
		width: 100%;
		position: static;
	}
	.collectionFAQ_category.active::before{
		opacity: 0;
	}
	.collectionFAQ_item-body-content {
		flex-direction: column;
	}
	.collectionFAQ_item-body-right {
		width: 100%;
	}

	.collectionFAQ_item.active{

		&:not(:first-child){
			padding-top: 20px;
		}
		&:not(:last-child){
			padding-bottom: 30px;
		}

	}

}

@media (max-width: 480px) {

	.collectionFAQ_item-header{
	    padding: 20px 0;
	}
	.collectionFAQ_item-body{
	    padding-left: 0;
		padding-right: 0;
	}
	.collectionFAQ_item-title{
	}

}