#faq {
	.wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;			
        align-content: baseline;	

        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr;
            gap: 32px;
        }
	}

    .header {
        display: grid;
        gap: 32px;
        margin-bottom: 0;
    }

    .list {
        display: grid;
        gap: 10px;
        align-content: baseline;    

        .item {
			border-radius: 20px;
			background: #1A1A1A;
            outline: 2px solid transparent;
            transition: all 0.3s;

            .wrap {
                display: grid;
                grid-template-columns: 1fr auto;
            }

            .question {
                padding: 32px 40px;
                font-size: 26px;
                font-weight: 700;
                font-family: var(--font-big);
				line-height: 1;
                text-transform: uppercase;
                text-box: cap alphabetic;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                color: #fff;
                position: relative;
                transition: all 0.3s;

                @media only screen and (max-width: 980px) {
                    font-size: 20px;
                }

                p {
                	transition: all 0.3s;	 
                    margin: 0;               	
                    padding: 0;
                }

	            span {
	            	opacity: 0.5;
					font-size: 18px;
	                display: block;
	                transition: opacity .2s, transform .65s cubic-bezier(.65,.05,0,1);
	            }	

                svg {
                    .plus-path, .minus-path {
                        stroke: var(--primary);
                        transform-origin: center;
                        transition: transform .3s ease;
                    }
                }

	        }

            .answer {
                display: grid;
				grid-template-rows: 0fr;
				transition: grid-template-rows 0.5s ease-out;					
				
				.inner {
					line-height: 1.4;
                    font-size: 24px;
					overflow: hidden;
                    padding: 0px 40px 0px 40px;
					transition: all 0.5s;

                    @media only screen and (max-width: 980px) {
                        font-size: 18px;
                    }

				}					
            }


            &.open .answer {
				grid-template-rows: 1fr;
				
				.inner {
                    padding-bottom: 32px;
				}
            }

            &.open .question span {
            	transform: rotate(-225deg);
				opacity: 1;
            }

           &.open .question {
                svg {
                    .plus-path {
                        transform: rotate(270deg);
                    }

                    .minus-path {
                        transform: rotate(180deg);
                    }

                }
            }

        }
    }

    &[data-theme="light"] {
        background: #fff;

        .title {
            color: #111;
        }

        .description {
            color: #666;
        }

        .item {
            background: #F6F6F6;

            .question {
                color: #111;
            }

            .inner {
                color: #666;
            }

            .plus-path, .minus-path {
                stroke: #111 !important;
            }

            &:hover {
                outline: 2px solid #C1C1C1;
            }

        }
    }
}