/*
 * =====================================================
 * Shireen M Property
 * Gallery natural-ratio correction v1.1.4-r3
 *
 * Landscape:
 *   Full width
 *   Natural height
 *   No letterbox
 *   No crop
 *
 * Portrait:
 *   Natural ratio
 *   Centred
 *   Maximum sensible viewport height
 * =====================================================
 */


/* -----------------------------------------------------
   GALLERY WIDTH

   Slightly wider than r2.
   ----------------------------------------------------- */

.sm-gallery-v114-r2 {

    width:
        min(
            1500px,
            calc(100vw - 36px)
        ) !important;

    max-width:
        none !important;

    margin:
        12px auto
        24px !important;
}


/* -----------------------------------------------------
   REMOVE THE FIXED 3:2 STAGE

   This was responsible for the empty bands.
   ----------------------------------------------------- */

.sm-gallery-r2-stage {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    aspect-ratio:
        auto !important;

    overflow:
        hidden !important;

    background:
        #f3eee9 !important;
}


/* -----------------------------------------------------
   LANDSCAPE MAIN IMAGE

   Image itself determines stage height.
   ----------------------------------------------------- */

.sm-gallery-r2-main {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    aspect-ratio:
        auto !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/* -----------------------------------------------------
   PORTRAIT IMAGE HANDLING

   Portrait photos should not become 1500px tall.
   ----------------------------------------------------- */

.sm-gallery-r2-stage.is-portrait {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        min(
            72vh,
            820px
        ) !important;
}


.sm-gallery-r2-stage.is-portrait
.sm-gallery-r2-main {

    width:
        auto !important;

    max-width:
        100% !important;

    height:
        auto !important;

    max-height:
        min(
            72vh,
            820px
        ) !important;

    object-fit:
        contain !important;
}


/* -----------------------------------------------------
   LANDSCAPE CLASS
   ----------------------------------------------------- */

.sm-gallery-r2-stage.is-landscape
.sm-gallery-r2-main {

    width:
        100% !important;

    height:
        auto !important;

    max-height:
        none !important;
}


/* -----------------------------------------------------
   NAVIGATION

   Remains vertically centred on actual picture.
   ----------------------------------------------------- */

.sm-gallery-r2-nav {

    top:
        50% !important;
}


/* -----------------------------------------------------
   COUNTER

   Remains on the image.
   ----------------------------------------------------- */

.sm-gallery-r2-counter {

    bottom:
        14px !important;
}


/* -----------------------------------------------------
   THUMBNAILS
   ----------------------------------------------------- */

.sm-gallery-r2-thumbs {

    margin-top:
        10px !important;

    margin-bottom:
        0 !important;
}


/* -----------------------------------------------------
   REDUCE GAP TO PROPERTY INFORMATION
   ----------------------------------------------------- */

.property-detail
.sm-gallery-v114-r2 {

    margin-bottom:
        22px !important;
}


/* -----------------------------------------------------
   TABLET
   ----------------------------------------------------- */

@media(max-width:900px) {

    .sm-gallery-v114-r2 {

        width:
            calc(
                100vw - 24px
            ) !important;

        margin-bottom:
            20px !important;
    }


    .sm-gallery-r2-stage.is-portrait {

        min-height:
            min(
                68vh,
                700px
            ) !important;
    }


    .sm-gallery-r2-stage.is-portrait
    .sm-gallery-r2-main {

        max-height:
            min(
                68vh,
                700px
            ) !important;
    }
}


/* -----------------------------------------------------
   MOBILE
   ----------------------------------------------------- */

@media(max-width:640px) {

    .sm-gallery-v114-r2 {

        width:
            calc(
                100vw - 16px
            ) !important;

        margin:
            8px auto
            18px !important;
    }


    .sm-gallery-r2-stage.is-portrait {

        min-height:
            0 !important;
    }


    .sm-gallery-r2-stage.is-portrait
    .sm-gallery-r2-main {

        width:
            100% !important;

        max-height:
            72vh !important;
    }
}