#faq .faq__container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#faq .faq__item {
    background: #F3F3FA;
    border-radius: 12px;
    padding: 0 24px 24px;
}

#faq .faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 800;
    padding-top: 24px;
    margin: 0;
}

#faq .faq__question::after {
    content: "";
    display: inline-block;
    min-width: 24px;
    height: 24px;
    background-color: rgba(55, 59, 60, .8);
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE3LjJMNC41IDkuN0M0LjMxMjUzIDkuNTEyNDcgNC4yMDcyMSA5LjI1ODE2IDQuMjA3MjEgOC45OTNDNC4yMDcyMSA4LjcyNzgzIDQuMzEyNTMgOC40NzM1MiA0LjUgOC4yODZDNC42ODc1MyA4LjA5ODUzIDQuOTQxODQgNy45OTMyMSA1LjIwNyA3Ljk5MzIxQzUuNDcyMTYgNy45OTMyMSA1LjcyNjQ3IDguMDk4NTMgNS45MTQgOC4yODZMMTIgMTQuMzc0TDE4LjA4MSA4LjI5M0MxOC4yNjg1IDguMTA1NTMgMTguNTIyOCA4LjAwMDIxIDE4Ljc4OCA4LjAwMDIxQzE5LjA1MzIgOC4wMDAyMSAxOS4zMDc1IDguMTA1NTMgMTkuNDk1IDguMjkzQzE5LjY4MjUgOC40ODA1MiAxOS43ODc4IDguNzM0ODMgMTkuNzg3OCA5QzE5Ljc4NzggOS4yNjUxNiAxOS42ODI1IDkuNTE5NDcgMTkuNDk1IDkuNzA3TDEyIDE3LjJaIiBmaWxsPSIjMzczQjNDIi8+Cjwvc3ZnPgo=) 50% 50% / cover no-repeat;
    mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE3LjJMNC41IDkuN0M0LjMxMjUzIDkuNTEyNDcgNC4yMDcyMSA5LjI1ODE2IDQuMjA3MjEgOC45OTNDNC4yMDcyMSA4LjcyNzgzIDQuMzEyNTMgOC40NzM1MiA0LjUgOC4yODZDNC42ODc1MyA4LjA5ODUzIDQuOTQxODQgNy45OTMyMSA1LjIwNyA3Ljk5MzIxQzUuNDcyMTYgNy45OTMyMSA1LjcyNjQ3IDguMDk4NTMgNS45MTQgOC4yODZMMTIgMTQuMzc0TDE4LjA4MSA4LjI5M0MxOC4yNjg1IDguMTA1NTMgMTguNTIyOCA4LjAwMDIxIDE4Ljc4OCA4LjAwMDIxQzE5LjA1MzIgOC4wMDAyMSAxOS4zMDc1IDguMTA1NTMgMTkuNDk1IDguMjkzQzE5LjY4MjUgOC40ODA1MiAxOS43ODc4IDguNzM0ODMgMTkuNzg3OCA5QzE5Ljc4NzggOS4yNjUxNiAxOS42ODI1IDkuNTE5NDcgMTkuNDk1IDkuNzA3TDEyIDE3LjJaIiBmaWxsPSIjMzczQjNDIi8+Cjwvc3ZnPgo=) 50% 50% / cover no-repeat;
    mask-size: cover;
    margin-left: 24px;
    transition: transform .3s linear;
}

#faq .faq__item .faq__question.active::after  {
    transform: rotateX(180deg);
}

#faq .faq__item .faq__question.active + .faq__answer {
    margin-top: 12px;
}

#faq .faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}