/* Mobile responsive rules extracted from /css/donations.css. */
@media (max-width: 960px) {
    .support-use-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .support-tier-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {

    .support-intro-grid,
    .support-method-grid {
        grid-template-columns: 1fr;
    }

    .support-intro-grid {
        gap: 34px;
    }

    .support-contact-box {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .support-container {
        width: min(100% - 24px, 1180px);
    }

    .support-hero {
        min-height: 500px;
    }

    .support-hero-inner {
        padding: 76px 0;
    }

    .support-hero h1 {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .support-hero-description {
        font-size: 1rem;
    }

    .support-hero-button {
        width: 100%;
        text-align: center;
    }

    .support-section {
        padding: 78px 0;
    }

    .support-use-grid {
        grid-template-columns: 1fr;
    }

    .support-use-card,
    .support-method-card,
    .support-tier-card {
        padding: 28px 24px;
    }

    .support-method-card::after {
        right: 24px;
        bottom: 24px;
    }

    .support-contact-section {
        padding-bottom: 78px;
    }

    .support-contact-box {
        padding: 34px 24px;
    }

    .support-contact-actions {
        width: 100%;
        flex-direction: column;
    }

    .support-contact-button,
    .support-sub-button {
        width: 100%;
    }
}