/* =========================
   FAQ
   ========================= */

.faq__background {
    --faq-gap: 16px;
    --faq-lb-gap: 24px;
    --faq-bg-pad: 22px 22px 44px;
    --faq-content-pad: 60px;
    --faq-containers-br: 38px;

    padding: var(--faq-bg-pad);
    background: var(--border);
    border-radius: var(--faq-containers-br);
}

.faq__content {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-areas: "intro items";
    column-gap: var(--faq-gap);
    row-gap: var(--faq-lb-gap);
    align-items: start;
    padding: var(--faq-content-pad);
    border-radius: var(--faq-containers-br);
    background: var(--bg);
}

.faq__intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 24px;
}

.faq__title {
    grid-area: title;
    max-width: 330px;
    text-align: left;
}

.faq__left-block {
    grid-area: left;
    gap: var(--faq-lb-gap);
}

.faq__content .faq__items {
    grid-area: items;
}

.faq__email {
    word-break: break-word;
}

/* =========================
    Responsive
    ========================= */

@media screen and (max-width: 1024px) {
    .faq__background {
        --faq-gap: 8px;
        --faq-bg-pad: 5px 5px 10px;
        --faq-content-pad: 18px 9px 28px;

        --faq-containers-br: 28px;
    }

    .faq__content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "items"
            "left";
        --faq-gap: 8px;
        row-gap: var(--faq-gap);
    }

    .faq__intro {
        display: contents;
    }


    .faq__left-block {
        --faq-lb-gap: 8px;
        padding-top: 8px;
    }

}

@media screen and (max-width: 768px) {
    .faq__background {
        --faq-content-pad: 32px 12px;
    }

    .faq__container {
        padding-right: 0;
        padding-left: 0;
    }

    .faq__title {
        margin: 0 auto;
    }
    
    .faq__title,
    .faq__description-block,
    .faq__email {
        text-align: center;
    }

    .faq__email {
        font-size: 18px;
    }
}