.video-poster {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 20%, rgba(169, 231, 196, .20), transparent 35%),
        #020608;
    cursor: pointer;
}

.video-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.video-poster img[src] {
    opacity: 1;
}

.video-poster:hover img {
    transform: scale(1.015);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding-left: 4px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #07121d;
    background: rgba(169,231,196,.92);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
    transform: translate(-50%, -50%);
}

.video-card > video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #020608;
}
