.lib-comp-qa {
    max-width: var(--desktop);
    margin: 4rem auto;
}

.lib-comp-qa__title {
    text-align: center;
    font-weight: lighter;
    font-size: 2rem;
}

.lib-comp-qa__question {
    border-bottom: 1px solid var(--gray-color);
    color: var(--primary-color);
    font-weight: bold;
    padding: 1.5rem 1rem;
    font-size: 1.2rem;
    background-image: url(img/down.svg);
    background-position: center right;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 25px;
    cursor: pointer;
}

.lib-comp-qa__item.is-active .lib-comp-qa__question {
    background-image: url(img/up.svg);
}

.lib-comp-qa__answer {
    border-bottom: 1px solid var(--gray-color);
    padding-left: 1rem;
    padding-right: 1rem;
    color: var(--black-color);
    overflow: hidden;
    animation-name: fadeOut;
    animation-duration: .5s;
    max-height: 0;
    opacity: 0;
}

.lib-comp-qa__item.is-active .lib-comp-qa__answer {
    animation-name: fadeIn;
    animation-duration: .5s;
    max-height: 300px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    opacity: 1;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    } 
    100% {
        opacity: 1;
        max-height: 300px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        max-height: 300px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    } 
    100% {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 1140px) {
    .lib-comp-qa {
        margin: 4rem 2rem;
    }
}