.sd-el-video {
    position: relative;
    overflow: hidden;
    width: 100%
}

.sd-el-video :is(iframe,video) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    object-fit: cover
}

.sd-el-video:is(.sd-action-overlay,.sd-action-without) {
    border-radius: var(--sd-brd-radius)
}

.sd-el-video:is(.sd-action-overlay,.sd-action-without):not(.sd-with-aspect-ratio) {
    height: 400px
}

.sd-el-video.sd-with-aspect-ratio {
    aspect-ratio: var(--sd-aspect-ratio)
}

.sd-el-video-overlay {
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18)
}

.sd-el-video-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.sd-el-video-overlay:after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.15);
    transition: background-color 0.5s cubic-bezier(0, 0, 0.44, 1.18)
}

.sd-el-video:hover .sd-el-video-overlay {
    transform: scale(1.09)
}

.sd-el-video:hover .sd-el-video-overlay:after {
    background-color: rgba(0, 0, 0, 0.3)
}

.sd-el-video-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 4
}

.sd-el-video-link {
    z-index: 6
}

.sd-el-video-play-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    color: var(--color-gray-800);
    font-size: 100px;
    transition: color 0.5s cubic-bezier(0, 0, 0.44, 1.18)
}

.sd-el-video-play-btn:before {
    font-size: .32em;
    transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18);
    content: "\f101";
    font-family: "sandbox-font"
}

.sd-el-video-play-btn:after {
    content: '';
    position: absolute;
    inset: 0;
    border: min(.04em, 2px) solid currentColor;
    opacity: .4;
    border-radius: 50%;
    transition: opacity 0.5s cubic-bezier(0, 0, 0.44, 1.18)
}

.sd-el-video.sd-action-play .sd-el-video-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px
}

.sd-el-video-play-label {
    font-weight: 600;
    color: var(--color-gray-800)
}

.sd-el-video:is(.sd-action-play,.sd-action-button) {
    overflow: visible
}

.sd-el-video.sd-playing :is(.sd-el-video-overlay,.sd-el-video-link,.sd-el-video-control) {
    visibility: hidden;
    opacity: 0;
    transition: all .25s ease
}

.sd-el-video.sd-action-play .sd-el-video-btn:hover .sd-el-video-play-btn:before, .sd-el-video.sd-action-overlay:hover .sd-el-video-play-btn:before {
    transform: scale(0.9)
}

.sd-el-video.sd-action-play .sd-el-video-btn:hover .sd-el-video-play-btn:after, .sd-el-video.sd-action-overlay:hover .sd-el-video-play-btn:after {
    opacity: .6
}