.c3-project-media {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.c3-project-media__link {
    display: block;
}

.c3-project-media--preview {
    aspect-ratio: var(--c3-media-ratio, var(--c3-image-ratio, auto));
}

.c3-project-media--preview .c3-project-media__poster {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--c3-media-ratio, auto var(--c3-image-ratio, 1 / 1));
    object-fit: var(--c3-media-fit, cover);
}

.c3-project-media--preview .c3-project-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--c3-media-fit, cover);
    opacity: 0;
    pointer-events: none;
}

.c3-project-media--preview.is-playing .c3-project-media__video {
    opacity: 1;
}

.c3-project-media--no-poster {
    aspect-ratio: var(--c3-media-ratio, 16 / 9);
    background: #000;
}

.c3-project-media--detail {
    width: fit-content;
    max-width: 80vw;
}

.c3-project-media--detail .c3-project-media__poster,
.c3-project-media--detail .c3-project-media__video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--c3-media-max-height, 80vh);
    object-fit: contain;
}

.c3-project-media--detail.c3-project-media--no-poster {
    width: 80vw;
}

.c3-project-media--detail .c3-project-media__video {
    width: min(var(--c3-media-video-width, 80vw), calc(var(--c3-media-max-height, 80vh) * var(--c3-media-video-ratio, 1.77777778)));
    aspect-ratio: var(--c3-media-video-ratio, 16 / 9);
}

.c3-project-media__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.c3-project-media [hidden] {
    display: none !important;
}