/* Landing Gallery Styles */
    
    /* Gallery Container Styles */
    .landing-gallery {
        max-width: var(--max-width-container);
        margin: 0 auto;
        padding: 40px 0;
    }

    /* Column layout: .grid-d4-t2-m1-cols in common.css (4 / 2 / 1) */
    .landing-gallery__grid {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        justify-items: center;
    }

    /* Video Card Styles */
    .landing-gallery__video-card {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .landing-gallery__video-card-thumbnail {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-color: rgb(var(--color-light-gray));
        border: 1px solid rgb(var(--color-light-gray));
        overflow: hidden;
    }

    .landing-gallery__video-card-link {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
        text-decoration: none;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .landing-gallery__video-card-link:hover .landing-gallery__video-card-overlay,
    .landing-gallery__video-card-link:focus .landing-gallery__video-card-overlay {
        opacity: 0.9;
        background-color: rgba(var(--color-black), 0.2);
    }

    .landing-gallery__video-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(var(--color-black), 0.1);
        transition: opacity var(--transition), background-color var(--transition);
    }

    .landing-gallery__video-card-play-button {
        width: auto;
        height: auto;
        max-width: 60px;
        max-height: 60px;
        opacity: 0.9;
    }

    .landing-gallery__video-card-title {
        margin-top: 16px;
        margin-bottom: 0;
    }

    .landing-gallery__video-card-title h5 {
        font-family: var(--font-family-medium);
        font-size: 16px;
        font-weight: 500;
        color: rgb(var(--color-near-black));
        margin: 0;
        line-height: 1.4;
        text-transform: uppercase;
    }

    /* Video Modal Styles */
    .landing-gallery-modal__overlay {
        position: relative;
        padding: 1rem;
    }
    @media (max-width: 877px) {
        .landing-gallery-modal__overlay {
            padding: 0;
        }   
    }

    .landing-gallery-modal__wrapper {
        height: 100%;
        left: 0;
        position: relative;
        top: 0;
        width: 100%;
    }

    /* Custom modal styles for vanilla JS implementation */
    #ModalVideoCenter {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(var(--color-black), 0.5);
        z-index: 2101;
        overflow-y: auto;
    }

    #ModalVideoCenter.show {
        display: block;
    }

    #ModalVideoCenter .modal-dialog {
        position: relative;
        width: auto;
        max-width: 900px;
        margin: 1.75rem auto;
        pointer-events: none;
    }

    #ModalVideoCenter.show .modal-dialog {
        pointer-events: auto;
    }

    /* Restore modal-dialog-centered behaviour (overridden by the rule above).
       Ensures the video modal is vertically centred on mobile/tablet instead of
       sticking to the top and getting cut off. */
    #ModalVideoCenter .modal-dialog.modal-dialog-centered {
        display: flex;
        align-items: center;
        min-height: calc(100% - 3.5rem);
    }

    #ModalVideoCenter .modal-dialog.modal-dialog-centered .modal-content {
        width: 100%;
    }

    #ModalVideoCenter .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: rgb(var(--color-white));
        border: none;
        border-radius: 4px;
        box-shadow: var(--shadow-lg);
        pointer-events: auto;
    }

    #ModalVideoCenter .modal-body {
        position: relative;
        flex: 1 1 auto;
        padding: 1rem;
    }
    @media (max-width: 877px) {
        #ModalVideoCenter .modal-body {
            padding: 6px;
        }   
    }

    #ModalVideoCenter .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0.75rem;
        border-top: 1px solid rgb(var(--color-light-gray));
    }

    /* Mobile: <=877px */
    @media (max-width: 877px) {
        .landing-gallery {
            padding: 24px 0;
            max-width: 332px;
            margin: 0 auto;
        }

        .landing-gallery__video-card-title h5 {
            font-size: 14px;
        }

        .landing-gallery__video-card-play-button {
            max-width: 50px;
            max-height: 50px;
        }
    }