/* =====================================================
       Gallery page - mobile compatible, Metronic/Fancybox style
       ===================================================== */

 
/* Gallery popup / zoom mobile fix */
.gallery-page,
.gallery-page * {
    box-sizing: border-box;
}

.gallery-work-item em,
.gallery-work-item img {
    display: block;
    width: 100%;
}

@media (max-width: 767px) {
    .gallery-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .gallery-title-wrap {
        text-align: center;
    }

    .gallery-col {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 15px;
    }

    .gallery-work-item {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }

        .gallery-work-item img {
            height: 150px;
            object-fit: cover;
        }

        .gallery-work-item .recent-work-description {
            text-align: center;
            min-height: auto;
        }

    /* Fancybox v2 mobile image sizing */
    .fancybox-wrap {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
    }

    .fancybox-skin {
        padding: 8px !important;
        box-sizing: border-box;
    }

    .fancybox-outer,
    .fancybox-inner {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 78vh !important;
        overflow: hidden !important;
    }

        .fancybox-image,
        .fancybox-inner img {
            display: block !important;
            width: auto !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: 78vh !important;
            object-fit: contain !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

    .fancybox-close {
        top: -12px !important;
        right: -12px !important;
        z-index: 99999 !important;
    }

    .fancybox-title {
        font-size: 13px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .gallery-col {
        width: 100%;
        float: none;
    }

    .gallery-work-item {
        max-width: 300px;
    }

        .gallery-work-item img {
            height: 180px;
        }

    .fancybox-wrap {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        left: 9px !important;
        right: 9px !important;
    }

    .fancybox-outer,
    .fancybox-inner,
    .fancybox-image,
    .fancybox-inner img {
        max-height: 74vh !important;
    }
}