.card-video {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

.card-video-image {
    aspect-ratio: 16/9;
    position: relative;
    display: grid;
    overflow: hidden;
}

.card-video:is(:hover) {
    --_bg-o: 1;
    --_bg-size: auto 60%;
    --_bg-scale: 1.1;
}

.card-video-image > img {
  aspect-ratio: 16/9;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(var(--_bg-scale, 1));
  transition: transform 0.6s var(--easing-snappy);
}

.card-video-image::after,
.card-video-image > img {
    grid-area: 1/1;
}

.card-video-image::after {
    place-self: center;
    position: relative;
}

.card-video-image::after {
    content: '';
    background: rgba(0, 0, 0, var(--_bg-o, 0.5)) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NS41MzQiIGhlaWdodD0iOTguOTY0IiB2aWV3Qm94PSIwIDAgNjUuNTM0IDk4Ljk2NCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ1NS41LDgxMGw2MS4wMjksNDkuODQzTDQ1NS41LDkwNS44MTciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NTQuMjM1IC04MDguNDUxKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjQiIC8+CiAgICAgICAgICAgICAgICA8L3N2Zz4=') 50% 50% / var(--_bg-size, auto 50%) no-repeat;
    border-radius: 50%;
    width: 20%;
    aspect-ratio: 1;
    transition: background-color 0.6s ease, background-size 0.6s ease;
    pointer-events: none;
}

.card-video-link {
    --link-underline: none;
}

.card-video-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.card-video-content {
    margin-top: 0;    
}

.card-video-dialog[open] {
    border: none;
    background-color: transparent;
    padding: 0;
    height: 100%;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card-video-dialog[open] {
  --dialog-video-animation: scaleIn 0.2s 0.25s ease forwards;
}
 
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
} 

    /* ::view-transition-group(dialog) {
  animation-duration: 1.5s;
} */

    .card-video-dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.8);
    }

.card-video-dialog-form {
    max-width: 1200px;
    margin: auto;
    width: 100%;
}

.card-video-dialog-form-video {
    aspect-ratio: 16/9;
    max-height: 100%;
    width: 100%;
    margin-top: 0;
    /* opacity: 0; */
    /* animation: var(--dialog-video-animation, none); */
    position: relative;
    /* view-transition-name: dialog-video; */
}

    .card-video-dialog-form-video > iframe,
    .card-video-dialog-form-video video {
        position: absolute;
        inset: 0;
        height: 100%;
        width: 100%;
    }

.card-video-dialog-close {
    border: none !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMzJweCIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYweiIgZmlsbD0ibm9uZSI+PC9wYXRoPgogICAgICA8cGF0aCBkPSJNMTkgNi40MUwxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyIDE5IDYuNDF6Ij48L3BhdGg+CiAgICA8L3N2Zz4=');
    background-size: 100% 100%;
    height: 24px;
    width: 24px;
    padding: 8px;
    position: absolute;
    top: 0;
    right: 0;
    text-indent: -999px;
    overflow: hidden;
}

.card-video-dialog-close:focus-visible {
    outline: 0;
}

.card-video-dialog-error {
    margin: 0;
    aspect-ratio: 16/9;
    background: black;
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}