/* ==========================================
   Mobile
   768px
========================================== */

@media (max-width:768px){

    /* Header */

    .header{

        height:70px;

        padding:0 20px;

    }

    .logo-main{

        font-size:1.5rem;

    }

    .logo-sub{

        display:none;

    }

    /* Navigation */

    .nav{

        position:fixed;

        top:70px;
        right:-100%;

        width:280px;
        height:calc(100vh - 70px);

        background:rgba(17,17,17,.98);

        backdrop-filter:blur(18px);

        transition:.35s;

        padding:40px 24px;

    }

    .nav.active{

        right:0;

    }

    .nav ul{

        flex-direction:column;

        gap:28px;

    }

    .menu-button{

        display:block;

    }

    /* Hero */

    .hero{

        height:85vh;

    }

    .hero-title{

        font-size:2.5rem;

    }

    .hero-text{

        font-size:1rem;

    }

    /* Section */

    .section{

        padding:80px 20px;

    }

    h2{

        font-size:2rem;

    }

    /* Gallery */

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:260px;

    }

    /* News */

    .news-item{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .news-title{

        padding-left:0;

    }

    /* System */

    .system-card{

        padding:24px;

    }

    .system-item{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    /* Access */

    #googleMap{

        height:280px;

    }

    /* Footer */

    .footer{

        padding:40px 20px;

    }

}

@media (max-width:480px){

    .hero-title{

        font-size:2rem;

    }

    .hero-text{

        font-size:.95rem;

    }

    .btn{

        width:100%;

    }

    .gallery-grid{

        gap:12px;

    }

}

/* ==========================================
   Modal
========================================== */

@media (max-width:768px){

    .modal-content{

        width:95%;

    }

    .modal-body{

        grid-template-columns:1fr;

    }

    .modal-image{

        height:300px;

    }

    .modal-info{

        padding:24px;

    }

    .modal-prev,
    .modal-next{

        width:44px;

        height:44px;

    }

}