html.op3-screenshot {

    &, body {
        overflow: hidden;
    }

    #op3-designer-element {

        // force size
        width: 1200px;
        min-height: 675px;

        // problem with cross-origin iframes,
        // let's replace them with placeholders
        iframe {
            display: none;
        }

        // iframe placeholder
        .op3-element-iframe-placeholder {
            display: block;
            width: 100%;
            height: 2em;
            background: gray;

            &::before {
                content: "\f489";
                position: absolute;
                display: block;
                top: 50%;
                left: 50%;
                font-size: 92px;
                font-family: "op3-icons";
                color: white;
                transform: translateX(-50%) translateY(-50%);
            }
        }

        // hide what doesn't belong on frontend
        #op3-designer-element-add-section,
        .op3-element.op3-focus::before,
        .op3-popoverlay-controls,
        .op3-element-layouts-wrapper,
        [data-jquery-paddingdrag] {
            display: none;
        }

    }

}