[data-mf-studio-preview] {
    position: relative;
    width: 100%;
    container-type: inline-size;
}

.mf-studio-preview-frame {
    display: block;
    width: 100%;
    height: 660px;
    border: 0;
    visibility: hidden;
}

[data-mf-studio-preview].is-ready .mf-studio-preview-frame {
    visibility: visible;
}

[data-mf-studio-preview] > a[hidden] {
    display: none;
}

[data-mf-studio-preview]:has(.mf-studio-preview-frame) > a:not([hidden]) {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
}

@container (max-width: 680px) {
    .mf-studio-preview-frame {
        height: 640px;
    }
}