.roleta-card-image-frame {
    position: relative;
    flex: 0 0 auto;
    width: var(--roleta-image-width, 480px);
    max-width: 100%;
    aspect-ratio: var(--roleta-image-ratio, 2 / 1);
    margin-inline: auto;
    overflow: hidden;
    isolation: isolate;
    border-radius: 12px;
    background: var(--roleta-image-background, var(--mf-muted));
}

.roleta-card-image-frame .roleta-card-image-media {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: var(--roleta-image-fit, cover);
    object-position: var(--roleta-image-x, 50%) var(--roleta-image-y, 50%);
    transform: scale(var(--roleta-image-zoom, 1));
    transform-origin: var(--roleta-image-x, 50%) var(--roleta-image-y, 50%);
}