/* ==========================================================================
5. SMALLER SCREENS LANDSCAPE MODE (Mobile Phones)
========================================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) {
    #shared-modal.is-active, #shared-modal.is-active .modal-overlayy {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    /* Caps the phone image to 48% height, ensuring text fits on ultra-wide phone screens */
    #shared-modal .full-size-image, .modal-overlay img {
        max-height: 48vh !important; 
        max-width: 80% !important;
        width: auto !important;       
        height: auto !important;
        margin: 0 auto 4px auto !important;
    }

    #shared-modal .image-text, #shared-modal .image-description, 
    #shared-modal .image-counter, .modal-caption {
        font-size: 13px !important;   
        line-height: 1.2 !important;
        max-height: 28vh !important;  /* Allots a larger percentage box to clear phone text */
        overflow-y: auto !important;  
        margin: 0 auto !important;
        padding: 0 15px !important;
        color: #ffffff !important;    
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
6. LARGER SCREENS LANDSCAPE MODE (Tablets)
========================================================================== */
@media screen and (min-width: 951px) and (max-width: 1300px) and (orientation: landscape) {
    #shared-modal.is-active, #shared-modal.is-active .modal-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* Keeps tablet images large (62% height) since the viewport has plenty of physical headroom */
    #shared-modal .full-size-image, .modal-overlay img {
        max-height: 62vh !important; 
        max-width: 85% !important;   
        width: auto !important;       
        height: auto !important;
        margin: 0 auto 10px auto !important;
    }

    #shared-modal .image-text, #shared-modal .image-description, 
    #shared-modal .image-counter, .modal-caption {
        font-size: 14px !important;   
        line-height: 1.4 !important;
        max-height: 22vh !important;  
        overflow-y: auto !important;  
        margin: 0 auto !important;
        padding: 0 20px !important;
        color: #ffffff !important;    
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}