.faq {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: var(--tile-padding);
}

.faq__list, .faq__list > div {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.faq__list > div {
    flex-direction: column;
}

.faq__block {
    border: 1px solid #979797;
    border-radius: var(--border-radius);
    overflow: hidden;
    height: min-content;
    width: 100%;
}

.faq__question {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    font-weight: 600;
    color: black;

    cursor: pointer;
}

.faq__question > img {
    min-width: .8rem;
    max-width: .8rem;
    transform: rotate(180deg);
    transition-duration: var(--anim-dur);

    user-select: none;
}

.faq__answer {
    height: 0;
    transition-duration: var(--anim-dur);

    color: rgba(0,0,0,0);
}

.faq__block.active img {
    transform: rotate(0);
}

.faq__block.active .faq__answer {
    height: auto;
    border-top: inherit;
    padding: .75rem;
    padding-bottom: 1rem;

    color: black;

    animation: textAppear 1s;
}

@keyframes textAppear {
    0% {
        color: rgba(0,0,0,0);
    }
    100% {
        color: rgba(0,0,0,100);
    }
}

@media screen and (max-width: 836px) {
    .main {
        padding: 0 !important;
    }
    .faq {
        padding: var(--tile-padding) !important;
    }

    .faq > .faq__list.mobile {
        display: flex !important;
        flex-direction: column;
    }

    .faq__block {
        gap: 0 !important;
    }
}