.video-banner {
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
    border-radius: 16px;
}
.video-control button {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fffcf8;
    border: 3px solid #1d303b;
    position: relative;
}
.video-control button img {
    z-index: 99;
    filter: invert(1);
}
.video-control button:hover img {
    filter: none;
}
.video-control button img.play {
    display: none;
}
.video-control button.video-pause img.play {
    display: block;
}
.video-control button.video-pause img.pause {
    display: none;
}
.video-control button:after {
    top: -3px;
    left: -3px;
    transform: scale(1);
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background: #1d303b;
    display: flex;
    transition: 0.3s ease-in-out;
    content: "";
    position: absolute;
}
.video-control button:hover:after {
    transform: scale(0);
}

.video-banner video {
    width: 100%;
    position: absolute;
    vertical-align: middle;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.video-control {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

@media only screen and (max-width: 991px) {
    .video-banner {
        margin-bottom: 26px;
    }
}