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

/* Questions + a sidebar with the contact form. From 992px the sidebar moves
   to the left and its form stays in view while the page scrolls. */
.faq {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.faq__questions,
.faq__sidebar {
    width: 100%;
}

/* ---------- Sidebar form ---------- */

.faq-form {
    display: grid;
    row-gap: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
    background-color: var(--color-gray-light);
}

.faq-form__title {
    font-size: var(--fs-header-xs);
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-base);
}

.faq-form__text {
    line-height: var(--lh-large);
}

@media (min-width: 992px) {
    .faq {
        flex-direction: row-reverse;
    }

    .faq__sidebar {
        max-width: 330px;
    }

    .faq-form {
        position: sticky;
        top: 112px;
        padding: var(--spacing-lg);
    }
}