/* ==========================================
TABLETS
========================================== */

@media (max-width:992px){

    .container{
        width:94%;
    }

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

    .shop-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

    .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/* ==========================================
MOBILE
========================================== */

@media (max-width:768px){

    .container{
        width:92%;
    }

    nav{

        padding:20px;

        flex-direction:column;

        gap:20px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero{

        min-height:auto;

        padding:140px 0 80px;

    }

    .hero h1{

        font-size:3rem;

        line-height:1;

    }

    .hero-sub{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        text-align:center;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .shop-grid{

        grid-template-columns:1fr;

    }

    .music-grid{

        grid-template-columns:1fr;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .demo-player{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    footer{

        text-align:center;

    }

}