/* Mobile-specific styles for gallery-mobile.css */

@media (max-width: 768px) {
    .gallery-title {
        font-size: 28px;
        margin-top: 80px;
        margin-bottom: 30px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .gallery-item {
        width: auto;
        height: 180px;
    }

    .gallery-window {
        width: 70%;
        max-height: 70%;
        padding: 6%;
    }

    .fullscreen-gallery-content .nav-btn {
        font-size: 40px;
    }

    .nav-btn.prev-btn {
        left: -45px;
    }

    .nav-btn.next-btn {
        right: -45px;
    }

    .fullscreen-gallery-content .nav-btn img {
        width: 40px;
        height: 40px;
    }

    .gallery-window .close-modal-gallery {
        top: 5px;
        right: 5px;
        height: 20px;
        width: 20px;
    }

    .close-modal-gallery img {
        height: 20px;
        width: 20px;
    }
}

@media (max-width: 480px) {
    .gallery-title {
        font-size: 24px;
        margin-top: 60px;
        margin-bottom: 20px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }

    .gallery-item {
        height: 150px;
    }

    .gallery-window {
        width: 70%;
        max-height: 70%;
        padding: 6%;
    }

    .fullscreen-gallery-content .nav-btn {
        font-size: 30px;
    }

    .nav-btn.prev-btn {
        left: -45px;
    }

    .nav-btn.next-btn {
        right: -45px;
    }

    .fullscreen-gallery-content .nav-btn img {
        width: 30px;
        height: 30px;
    }
}