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

/* ---------- Tablet ---------- */

@media (max-width:1000px){

    header{
        padding:50px 20px;
    }

    .hero{
        padding:50px 25px;
    }

    .grid{
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }

    .app-grid{
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }

    .app-detail-header{
        gap:18px;
    }

    /* Carousel */

    .carousel{
        max-width:280px;
    }

    .carousel-window{
        width:280px;
    }

    .carousel-track img{
        width:280px;
        min-width:280px;
    }

}

/* ---------- Smartphone ---------- */

@media (max-width:700px){

    header{
        padding:40px 20px;
    }

    header h1{
        font-size:2rem;
    }

    header p{
        font-size:1rem;
    }

    .hero{
        padding:35px 20px;
    }

    .hero h2{
        font-size:1.8rem;
    }

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

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

    .app-card{
        flex-direction:column;
        text-align:center;
    }

    .app-detail-header{
        flex-direction:column;
        text-align:center;
    }

    /* Carousel */

    .carousel{
        max-width:240px;
    }

    .carousel-window{
        width:240px;
    }

    .carousel-track img{
        width:240px;
        min-width:240px;
    }

    .carousel-controls{
        gap:14px;
        margin-top:14px;
    }

    .carousel-btn{
        width:38px;
        height:38px;
        font-size:20px;
    }

    .dot{
        width:9px;
        height:9px;
    }

}