.kb-pattern-preview {
    /* transition: .15s width ease-in-out;
     */
    margin-block: 2em;
    margin-inline: auto;
    width: 1280px;
    /*
    max-width: 100vw !important;
    min-width: 23rem;
    position: relative;
    container-type: inline-size; */
} 

/* 
.kb-pattern-preview > * {
    overflow: hidden;
}

.kb-pattern-preview .resizer {
    width: .5em;
    height: calc(100% - 4em);
    background: #999;
    border-radius: 100px;
    position: absolute;
    top: 2em;
    bottom: 2em;
    right: -1.5em;
    cursor: ew-resize;
}

.kb-pattern-preview .resizer:hover, 
.kb-pattern-preview .resizer:focus {
    background: #666;
}  */

h2 + iframe {
    margin-block-start: 0 !important;
}

iframe {
    position: relative;
    z-index: 1;
    max-width: calc(100vw - 2em) !important;
    max-height: calc(100vh - 8em) !important;
    min-width: 320px;
    min-height: 120px;
    box-shadow: 0 10px 20px 2px rgb(0 0 0 / 20%), 0 2px 80px 10px rgb(0 0 0 / 10%);
    border: none;
    margin-bottom: 2em !important;
    margin-top: 1em !important;
    resize: both; /* Ermöglicht Größenänderung in beide Richtungen */
            overflow: auto; /* Stellt sicher, dass der Inhalt gescrollt wird, falls er größer als der Div ist */
}