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

@media (max-width: 640px) {

    :root {
        --side-padding: 16px;
    }
    
    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 23px;
    }

    h3 {
        font-size: 18px;
    }

    /* ==================================================
     Hero
    ================================================== */

    .hero {
        margin-top: 24px;
    }

    .hero-card {
        padding: 26px;
    }

    .hero-profile-image {
        width: 84px;
        height: 84px;

        border-radius: 22px;
    }

    /* ==================================================
     Sections
    ================================================== */

    .section {
        margin-top: 48px;
    }

    /* ==================================================
     Feature
    ================================================== */

    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   Small Mobile
================================================== */

@media (max-width: 480px) {

    .site-logo-name {
        font-size: 18px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 20px;
    }

    body {
        font-size: 14px;
    }

    .section-label {
        font-size: 14px;
    }

    /* ==================================================
     Hero
    ================================================== */

    .hero-card {
        padding: 22px;
    }

    .hero-main {
        gap: 16px;
    }

    .hero-profile-image {
        width: 70px;
        height: 70px;

        border-radius: 18px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

}