/*
==========================================================================

 PROJECT     : SIGNATURE SPREADS AND TREATS BY DI
 VERSION     : 1.0.0
 AUTHOR      : JB

===========================================================================
*/

@media (max-width: 1199.98px) {
    .faq-page .faq-layout {
        grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1.48fr);
        gap: 3.5rem;
    }
}

@media (max-width: 991.98px) {
    .faq-page .site-hero-media img {
        object-position: 70% center;
    }

    .faq-page .faq-layout {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .faq-page .faq-intro {
        position: static;
    }

    .faq-page .faq-intro-copy,
    .faq-page .faq-intro-note {
        max-width: 60ch;
    }

    .faq-page .faq-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 var(--space-lg);
        margin-top: var(--space-xl);
    }

    .faq-page .faq-support-layout {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .faq-page .faq-support-items {
        border-left: 0;
    }
}

@media (max-width: 767.98px) {
    .faq-page .faq-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-page .faq-support-items {
        grid-template-columns: 1fr;
    }

    .faq-page .faq-support-item {
        padding: var(--space-lg) 0;
    }

    .faq-page .faq-support-item:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid rgba(220, 201, 170, 0.72);
    }
}

@media (max-width: 575.98px) {
    .faq-page .site-hero-media img {
        object-position: 74% center;
    }

    .faq-page .faq-main {
        padding: var(--space-4xl) 0;
    }

    .faq-page .faq-intro h2 {
        font-size: clamp(2.8rem, 12vw, 3.9rem);
    }

    .faq-page .faq-categories {
        grid-template-columns: 1fr;
    }

    .faq-page .faq-panel {
        padding: var(--space-xl) var(--space-lg);
        border-radius: var(--radius-lg);
    }

    .faq-page .faq-group-header h2 {
        font-size: 2.35rem;
    }

    .faq-page .faq-question {
        grid-template-columns: minmax(0, 1fr) 32px;
        gap: var(--space-md);
        padding: var(--space-lg) 0;
    }

    .faq-page .faq-question i {
        width: 32px;
        height: 32px;
    }

    .faq-page .faq-answer-inner {
        padding-right: 0;
    }

    .faq-page .faq-support {
        padding: var(--space-3xl) 0;
    }
}

@media (max-width: 374.98px) {
    .faq-page .faq-panel {
        padding-inline: var(--space-md);
    }

    .faq-page .faq-question span {
        font-size: 1.1rem;
    }
}