/*
 * Resize Videos
 * Makes native HTML5 videos and YouTube embeds fluid on desktop, tablet, and mobile.
 */

.shiply-resize-video-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem;
    overflow: hidden;
}

.shiply-resize-video-wrapper video,
.shiply-resize-video-wrapper iframe,
video[data-shiply-resize-video-processed="1"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
}

.shiply-resize-video-wrapper--html5 {
    aspect-ratio: var(--shiply-resize-video-ratio, 16 / 9);
}

.shiply-resize-video-wrapper--html5 video {
    height: auto !important;
    object-fit: contain;
}

.shiply-resize-video-wrapper--iframe {
    position: relative;
    aspect-ratio: var(--shiply-resize-video-ratio, 16 / 9);
}

.shiply-resize-video-wrapper--iframe iframe {
    position: absolute;
    inset: 0;
    height: 100% !important;
}

/* Fallback for older browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
    .shiply-resize-video-wrapper--iframe {
        height: 0;
        padding-bottom: 56.25%;
    }

    .shiply-resize-video-wrapper--html5 video {
        height: auto !important;
    }
}

figure .shiply-resize-video-wrapper:last-child,
p .shiply-resize-video-wrapper:last-child {
    margin-bottom: 0;
}