.paneflow{width:100%;aspect-ratio:16/9}.paneflow *{box-sizing:border-box}.paneflow-content{width:100%;height:100%;position:relative;overflow:hidden;box-sizing:border-box;container-name:slider;container-type:size}.paneflow-content *{transition-timing-function:cubic-bezier(.56,0,.03,.99)}.paneflow-block{--pf-full-minus-padding: 100% - 2 * var(--pf-padding);--pf-cols-gap: (var(--pf-cols) - 1) * var(--pf-gap);--pf-rows-gap: (var(--pf-rows) - 1) * var(--pf-gap);width:calc((var(--pf-full-minus-padding) - var(--pf-cols-gap)) / var(--pf-cols) * var(--pf-width-cols) + (var(--pf-width-cols) - 1) * var(--pf-gap));height:calc((var(--pf-full-minus-padding) - var(--pf-rows-gap)) / var(--pf-rows) * var(--pf-height-rows) + (var(--pf-height-rows) - 1) * var(--pf-gap));left:calc(var(--pf-padding) + (var(--pf-full-minus-padding) - var(--pf-cols-gap)) / var(--pf-cols) * var(--pf-col) + var(--pf-col) * var(--pf-gap));top:calc(var(--pf-padding) + (var(--pf-full-minus-padding) - var(--pf-rows-gap)) / var(--pf-rows) * var(--pf-row) + var(--pf-row) * var(--pf-gap));position:absolute;border-radius:3cqw;overflow:hidden}html,body{position:relative;margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.demo-buttons{text-align:center}.bg-image{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;object-position:center}.paneflow-demo-1 .paneflow-block-2{background:red;color:#fff}.paneflow-demo-1 .paneflow-block-2 .small-text{position:absolute;left:3cqw;top:3cqw;font-size:1.5cqw;width:calc(100% - 17cqw);opacity:.75;transform-origin:left top}.paneflow-demo-1 .paneflow-block-2 .large-text{font-weight:700;position:absolute;left:3cqw;bottom:3cqw;font-size:3cqw;max-width:calc(100% - 6cqw);line-height:1;transform-origin:left bottom}.paneflow-demo-1 .paneflow-block-2 .large-text div{transition-property:transform}.paneflow-demo-1 .paneflow-block-2 svg{position:absolute;right:3cqw;top:3cqw;width:3cqw;height:3cqw;opacity:0;transform:rotate(360deg)}.paneflow-demo-1 .paneflow-block-5{background:red;color:#fff}.paneflow-demo-1 .paneflow-block-5 .large-text{font-weight:700;position:absolute;left:3cqw;bottom:3cqw;font-size:6cqw;max-width:calc(100% - 6cqw);line-height:1;transform-origin:left}.paneflow-demo-1 .paneflow-block-8{background:red;color:#fff}.paneflow-demo-1 .paneflow-block-8 .large-text{font-weight:700;position:absolute;text-align:left;left:3cqw;top:16cqw;font-size:8cqw;max-width:calc(100% - 6cqw);line-height:1;transform-origin:left top}.paneflow-demo-1 .paneflow-block-8 .large-text div{transition-property:transform}.paneflow-demo-1 .paneflow-block-8 .small-text{font-size:2cqw;position:absolute;left:3cqw;top:34cqw;opacity:.75;width:calc(100% - 4cqw);line-height:1.5}.paneflow-demo-1 .paneflow-block-12{background:red;color:#fff}.paneflow-demo-1 .paneflow-block-12 .large-text{font-weight:700;position:absolute;text-align:left;left:3cqw;top:6cqw;font-size:6cqw;max-width:calc(100% - 6cqw);line-height:1.25;transform-origin:left top}.paneflow-demo-1 .paneflow-block-12 .large-text div{transition-property:transform}.paneflow-demo-1 .paneflow-block-12 .large-text div:nth-child(1){transform:translate(20%)}.paneflow-demo-1 .paneflow-block-12 .large-text div:nth-child(3){transform:translate(20%)}.paneflow-demo-1 .paneflow-block-12 .small-text{font-size:1.5cqw;position:absolute;left:3cqw;bottom:3cqw;opacity:.75;width:calc(100% - 6cqw);line-height:1}