.faq {
    background: #fafafa;
    padding: 36px 0
}

.faq__container {
    max-width: 770px
}

.faq__list {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    position: relative;
    row-gap: 14px
}

.faq__item {
    background-color: #fff;
    border: 1px solid #aef0ae;
    border-radius: 27px;
    box-shadow: 0 0 20px 0 rgba(12, 158, 15, .15);
    overflow: hidden;
    position: relative;
    z-index: 5
}

.faq__question {
    align-items: center;
    background: none;
    border: none;
    color: #01c102;
    display: flex;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 52px;
    padding: 10px 20px;
    text-align: left;
    text-decoration: none
}

.faq__plus {
    display: block;
    flex-shrink: 0;
    font-size: .8125rem;
    height: 1em;
    line-height: 0;
    margin-right: 15px;
    position: relative;
    width: 1em
}

.faq__plus:after,
.faq__plus:before {
    background: #01c102;
    content: "";
    display: block;
    height: 3px;
    left: 50%;
    margin: -.1em 0 0 -.5em;
    position: absolute;
    top: 50%;
    width: 100%
}

.faq__plus:after {
    transform: rotate(90deg);
    transition-duration: .15s;
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out
}

.faq__item_active .faq__plus:after {
    opacity: 0;
    transform: rotate(0)
}

.faq__answer {
    color: #7b7a7a;
    display: none;
    font-size: .75rem;
    line-height: 1.5714285714;
    padding: 2px 20px 26px 50px
}

@media only screen and (min-width:48em) {
    .faq__list:before {
        background: transparent url(../img/bg-dots.png) repeat 0 0;
        content: "";
        display: block;
        height: 166px;
        left: -244px;
        position: absolute;
        top: -32px;
        width: 275px;
        z-index: 2
    }

    body.no-js .faq__list:before,
    body.no-webp .faq__list:before {
        background-image: url(../img/bg-dots.png)
    }

    body.webp .faq__list:before {
        background-image: url(../img/bg-dots.webp)
    }
}

@media only screen and (min-width:62em) {
    .faq {
        padding: 60px 0
    }

    .faq__list {
        margin-top: 94px
    }

    .faq__list:before {
        top: -132px
    }

    .faq__question {
        font-size: .875rem
    }

    .faq__plus {
        font-size: .9375rem
    }

    .faq__answer {
        font-size: .875rem
    }
}

@media only screen and (min-width:75em) {
    .faq {
        padding: 105px 0 120px
    }
}