.faq {
    position: relative;
}

.faq--solid-bg {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.867) 0%, rgba(199, 180, 208, 0.3) 100%);
}

.faq-white-bg {
    background: #ffffff;
}

.faq h2 {
    padding-bottom: 35px;
}

.faq-details p {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.62em;
}

.white-curve {
    position: absolute;
    left: 0;
    top: -60px;
    width: 100%;
}

.faq-section h2 {
    text-align: center;
}

.white-curve-faq {
    padding-top: 20px;
}

.faq-wrapper.faq--has-image {
    display: block;
}

.faq-wrapper.faq--has-image .faq-details {
    width: 100%;
    padding-left: 0;
}

@media (min-width: 768px) {
    .faq {
        padding-left: 62px;
        padding-right: 62px;
    }

    .white-curve {
        top: -105px;
    }
}

@media (min-width: 1200px) {
    .faq {
        padding-left: 0;
        padding-right: 0;
    }

    .faq-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .faq-image {
        width: 37%;
        position: relative;
    }

    .faq-details {
        width: 63%;
        position: relative;
        padding-left: 70px;
    }

    .faq-image-column {
        position: relative;
        height: auto;
        width: 100%;
        overflow: hidden;
    }

    .faq-image-column:before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        transition: height 0.6s ease-in-out;
        z-index: 1;
    }

    .faq-image-column.is-active:before {
        height: 0;
    }

    .faq-image-column.is-active img {
        transform: scale(1);
    }

    .faq-image-column img {
        object-fit: cover;
        width: 100%;
        height: auto;
        position: relative;
        transform: scale(1.5);
        transition: transform 0.6s ease-in-out;
    }

    .white-curve {
        top: -200px;
        width: 100%;
    }

    .white-curve-faq {
        padding-top: 0;
    }

}

@media (min-width: 1600px) {
    .white-curve {
        top: -240px;
        width: 100%;
    }
}