/* ==========================================
   RESPONSIVE.CSS
========================================== */

@media (max-width: 1200px) {

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
        text-align: center;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-left h1,
    .hero-left p {
        margin-inline: auto;
    }

    .gold-line {
        margin-inline: auto;
    }

    .hero-note {
        justify-content: center;
    }

    .hero-right {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .85rem;
        text-align: left;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {

    .hero-right {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    :root {
        --section-padding: var(--section-padding-mobile);
    }

    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height-mobile) + 40px);
        padding-bottom: 48px;
    }

    .hero-left h1 {
        letter-spacing: -.5px;
    }

    .hero-image img {
        max-width: 340px;
    }

    .hero-glow {
        width: 460px;
        height: 460px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .feature-card {
        padding: 20px 10px;
    }

    .footer-cols {
        gap: 32px;
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 576px) {

    .btn {
        padding: 13px 22px;
        font-size: .875rem;
    }

    .hero-left p {
        max-width: 100%;
    }

    .hero-note {
        flex-direction: column;
        gap: 4px;
    }

    .hero-image img {
        max-width: 280px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .feature-card__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
    }

    .feature-card h3 {
        font-size: .88rem;
    }

    .footer-cols {
        flex-direction: column;
        gap: 30px;
    }

    .footer-social {
        flex-wrap: wrap;
    }
}

@media (max-height: 850px) and (min-width: 1201px) {

    .hero {
        min-height: auto;
        padding: calc(var(--header-height) + 24px) 0 40px;
    }

    .hero-grid {
        gap: 32px;
    }

    .hero-image img {
        max-width: 420px;
    }
}