.bmp-video-elements__grid {
    display: grid;
    gap: 2rem;
}

/* SM / Default */
.bmp-video-elements__grid--sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bmp-video-elements__grid--sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bmp-video-elements__grid--sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bmp-video-elements__grid--sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .bmp-video-elements__grid--md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .bmp-video-elements__grid--md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmp-video-elements__grid--md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bmp-video-elements__grid--md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .bmp-video-elements__grid--lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .bmp-video-elements__grid--lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmp-video-elements__grid--lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bmp-video-elements__grid--lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .bmp-video-elements__grid--xl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .bmp-video-elements__grid--xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmp-video-elements__grid--xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bmp-video-elements__grid--xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bmp-video {

    position:relative;
}

.bmp-video__thumbnail {

    position:relative;
    cursor:pointer;
}

.bmp-video__title {

    margin: 15px 0 15px 0;
}

.bmp-video__image {
    width:100%;
    display:block;
    border: none;
    border-radius: 8px;

}

.bmp-video__play-button {

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
}

#bmp-video-overlay {

    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:99999;
    align-items:center;
    justify-content:center;
}

#bmp-video-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    max-width: 90vw;
    max-height: 85vh;
}

#bmp-video-player {
    display: block;

    width: auto;
    height: auto;

    max-width: 90vw;
    max-height: 85vh;
}

#bmp-video-close {
    position: absolute;
    right: 10px;
    top: 10px;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;
}