/* ==========================================================
   Media Video Fullwidth - Structure
   1) Local Tokens
   2) Wrapper
   3) Embedded Media
   4) Responsive
   ========================================================== */

/* ==========================================================
   Local Tokens
   ========================================================== */
.project-cover {
    --project-video-radius: 14px;
}

/* ==========================================================
   Wrapper
   ========================================================== */
.project-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--project-video-radius);
    overflow: hidden;
    background: var(--bg-light);
    clip-path: inset(0 round var(--project-video-radius));
}

/* ==========================================================
   Embedded Media
   ========================================================== */
.project-cover iframe {
    position: absolute;
    inset: 0.5px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    display: block;
    border: 0;
    border-radius: inherit;
    clip-path: inset(0 round calc(var(--project-video-radius) - 0.5px));
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 640px) {
    .project-cover {
        --project-video-radius: 0px;
        border-radius: 0;
    }
}