@media (max-width: 80rem) {
    /* max-width: 1280px */
    html {
        font-size: 56.25%;
    }

    .hero-img {
        width: 50rem;
        height: auto;
    }

    .hero-btn1,
    .hero-btn2 {
        padding: 1rem;
    }
}


@media (max-width: 67.5rem) {
    /* max-width: 1080px */
    html {
        font-size: 50%;
    }
    .hero-img {
        width: 45rem;
        height: auto;
    }

    .style-with-wrapper {
        width: 80%;
    }
   
    .style-with-card1,
    .style-with-card2 {
        flex: 0 0 50%;
        padding: 5rem 12rem;
    }

    .style-with-header {
        padding-left: 30rem;
    }

    .style-with-header h2 {
        font-size: 7rem;
    }
    
    .style-with-header h3 {
        font-size: 1.6rem;
    }

    .arrival-cards {
        justify-content: space-evenly;
        padding: 8rem;
    }

    .arrival-card {
        flex: 0 0 37.5%;
        margin-bottom: 2rem;
        padding: 4rem;
        width: 30%;
    }

    .links {
        flex: 0 0 50%;
    }
}   

@media (max-width: 56rem) {
    /* max-width: 896px */
    html {
        font-size: 43.75%;
    }

    .hero-img {
        width: 43rem;
        height: auto;
    }
    
    .hero-content h1 {
        margin-right: 2rem;
        font-size: 4rem;
    }

    .style-with-card1,
    .style-with-card2 {
        padding: 5rem;
    }

    .style-with-header {
        padding-left: 20rem;
    }
}

@media (max-width: 42.5rem){
    /* max-width: 680px */
    html {
        font-size: 37.5%;
    }
    
    .hero-wrapper {
        flex-wrap: wrap;
    }
    .hero-img {
        flex: 0 0 100%;
        padding: 5rem;
    }

    .hero-content {
        flex: 0 0 100%;
    }
    

    .hero-content h1 {
        font-size: 6rem;
    }

    .style-with-card1,
    .style-with-card2 {
        padding: 5rem 12rem;
        flex: 0 0 100%;
    }

    .arrival-card {
        flex: 0 0 100%;
        padding: 5rem 10rem;
    }
}