@media (max-width: 73em) {

    .hero-container {
        /* align-items: center; */
        justify-items: center;
    }

    .hero-img {
        width: 40rem;
    }

    .hero-name {
        margin-top: 0;
    }
    
    .hero-header {
        letter-spacing: 0.48px;
        font-size: 4rem;
        color: #333;
    }
    
    .hero-caption {
        font-size: 2.4rem;
        color: #555;
    }

    .hero-text-box {
        margin-bottom: 0rem;
    }
    
    .hero-text {
        font-size: 4rem;
        color: #555;
        font-weight: bold;
    }

    .nav-home-link {
        font-size: 2.4rem;
    }
}

@media (max-width: 57.5em) {

    .cta-img {
        display: none;
    }

    .cta {
        padding: 2.4rem 1.2rem;
    }

    .cta-box {
        max-width: 60rem;
    }
    
    .cta-container {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 4.8rem;
        align-items: center;
        justify-items: center;
    }

}

@media (max-width: 50em) {

    .hero-img {
        width: 30rem;
    }
    
    .hero-header {
        font-size: 3rem;
        color: #333;
        letter-spacing: 0.4px;
    }
    
    .hero-caption {
        font-size: 1.8rem;
        color: #555;
    }

    .hero-text-box {
        margin-bottom: 0rem;
    }
    
    .hero-text {
        font-size: 3rem;
        color: #555;
        font-weight: bold;
    }

    .nav-home-link {
        font-size: 1.8rem;
    }

    .translate-link {
        font-size: 1.8rem;
        border-bottom: 2px solid #555;
    }

    .nav-home-container {
        gap: 4.8rem;
    }

}

@media (max-width: 40em) {

    .nav {
        padding: 2.4rem 1.2rem;
    }

    .nav-container {
        display: flex;
        flex-direction: column;
        gap: 4.8rem
    }

    .nav-link {
        font-size: 2.4rem;
    }

    .gallery {
        padding: 2.4rem 1.2rem;
    }

}

@media (max-width: 38.2em) {

    .translate {
        padding: 1.2rem 0.6rem 0;
    }

    .translate-link {
        font-size: 1.2rem;
        border-bottom: 1px solid #555;
    }

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

    .hero-item {
        gap: 1.2rem;
        height: 75vh;
    }

    .hero {
        padding: 1.2rem 0.6rem;
    }

    .hero-img {
        display: none;
    }

    .hero-mob-img {
        width: 40rem;
        border-radius: 50%;
        display: block;
        padding: 1.2rem
    }

    /* .hero-header {
        font-size: 2.4rem;
        color: #333;
    }
    
    .hero-caption {
        font-size: 1.2rem;
        color: #555;
    }

    
    .hero-text {
        font-size: 2.4rem;
        color: #555;
        font-weight: bold;
    }

    .translate-link {
        font-size: 1.2rem;
        border-bottom: 2px solid #555;
    }

    .nav-home-container {
        gap: 2.4rem;
    } */

    /* .nav-home-link {
        font-size: 1.2rem;
    } */


}

@media (max-width: 30.6em) {

    .hero-img {
        display: none;
    }

    .hero-mob-img {
        width: 100%;
        border-radius: 50%;
        display: block;
        padding: 1.2rem
    }

    /* .hero-img {
        width: 20rem;
    } */
/* 
    .hero-header {
        font-size: 2rem;
        color: #333;
    }

    
    .hero-text {
        font-size: 2rem;
        color: #555;
        font-weight: bold;
    } */

    .hero-mob-img {
        width: 80%;
        border-radius: 50%;
        display: block;
        padding: 0 1.2rem;
        justify-self: center;
        align-self: center;
    }

    .nav-home-link {
        font-size: 2.4rem;
    }
}

@media (max-width: 24.1em) {

    .hero {
        padding: 1.2rem 0.6rem;
    }

    .hero-img {
        width: 15rem;
    }

    /* .hero-header {
        font-size: 1.8rem;
        color: #333;
    }
    
    .hero-caption {
        font-size: 1rem;
        color: #555;
    }

    
    .hero-text {
        font-size: 1.8rem;
        color: #555;
        font-weight: bold;
    }

    .nav-home-link {
        font-size: 1rem;
    }

    .translate-link {
        font-size: 1rem;
        border-bottom: 2px solid #555;
    }

    .nav-home-container {
        gap: 2.4rem;
    } */

}