.faq {
    overflow: hidden;
    position: relative
}

.faq__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 128px
}

.faq__title {
    max-width: 308px;
    width: 100%
}

.faq__questions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 684px;
    width: 100%
}

.faq__faq {
    border-bottom: 1px solid #ddd;
    margin-bottom: 24px;
    overflow: hidden;
    padding-bottom: 24px;
    -webkit-transition: padding .3s;
    -o-transition: padding .3s;
    transition: padding .3s
}

.faq__faq-question {
    cursor: pointer;
    margin-bottom: 8px;
    max-width: 100%;
    padding-right: 64px;
    position: relative;
    width: 100%
}

.faq__faq-question:after {
    height: 16px;
    right: 7px;
    top: 16px;
    -webkit-transition: height .2s, top .2s, background .2s;
    -o-transition: height .2s, top .2s, background .2s;
    transition: height .2s, top .2s, background .2s;
    width: 2px
}

.faq__faq-question:after, .faq__faq-question:before {
    background: var(--dark);
    border-radius: 2px;
    content: "";
    position: absolute
}

.faq__faq-question:before {
    height: 2px;
    right: 0;
    top: 23px;
    width: 16px
}

.faq__faq-question.active:after {
    height: 2px;
    top: 23px
}

.faq__faq-answer ol, .faq__faq-answer ul {
    padding-left: 32px
}

@media (max-width: 1120px) {
    .faq__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 40px
    }

    .faq__questions, .faq__title {
        max-width: 100%
    }
}