.ev-video {
    position: relative;
    width: 100%;
    /*max-width: 500px;*/
    overflow: hidden;
    aspect-ratio: 4 / 4;
}

.ev-poster,
.ev-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    pointer-events: none;
}

.ev-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    z-index: 1;

    opacity: 1;
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.ev-poster {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    z-index: 2;

    opacity: 1;

    transition: opacity 300ms ease;
}

.ev-video.is-ready .ev-poster {
    opacity: 0;
    pointer-events: none !important;
}


.ev-btn {
    position: absolute;

    left: 10px;
    bottom: 10px;

    width: 30px;
    height: 30px;

    border: none;
    border-radius: 999px;

    background: rgba(0, 0, 0, .15);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

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

    cursor: pointer;

    z-index: 10;

    padding: 0;

    transition: transform .2s ease,
    background .2s ease;
}

@media (min-width: 992px) {
    .reverse .ev-btn {
        right: 10px;
        left: unset !important;
    }
}

.ev-btn:hover {
    transform: scale(1.05);
}

.ev-btn:active {
    transform: scale(.95);
}

.ev-btn svg {
    width: 30px;
    height: 30px;
}

.ev-bg {
    fill: none;
    background: rgba(0, 0, 0, .15);
    stroke-width: 3;
}

.ev-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 3;

    stroke-linecap: round;

    transform: rotate(-90deg);
    transform-origin: center;
}

.ev-icon {
    fill: #fff;
}