.roman-budget #roman-motion .r-demo{padding:0;border:0;border-radius:10px;overflow:hidden;background:#e8dfd3}
.roman-budget #roman-motion .r-motion-photo{width:100%;aspect-ratio:4/5;background-image:url('/roman/roman-motion-visual.png');background-size:300% 100%;background-position:50% 0;background-repeat:no-repeat}
.roman-budget #roman-motion [data-position=closed] .r-motion-photo{background-position:0 0}
.roman-budget #roman-motion [data-position=open] .r-motion-photo{background-position:100% 0}
.roman-budget #roman-motion .r-hero-art{width:100%;max-width:360px;justify-self:center}
.roman-budget #roman-motion .r-demo-controls{gap:6px;flex-wrap:wrap}
.roman-budget #roman-motion .r-demo-controls button{padding:10px 12px;min-height:44px}

.roman-budget #roman-motion .r-two{align-items:start;gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,400px);max-width:1060px;margin:0 auto}
.roman-budget #roman-motion .r-hero-art{max-width:400px}
.roman-budget #roman-motion{padding-top:52px}
@media(max-width:767px){.roman-budget #roman-motion .r-two{grid-template-columns:1fr;gap:20px}.roman-budget #roman-motion{padding-top:36px}}

@media(min-width:768px){.roman-budget #roman-motion .r-two{display:block;position:relative;min-height:400px;padding-right:360px;max-width:1060px}.roman-budget #roman-motion .r-hero-art{display:contents}.roman-budget #roman-motion .r-demo{position:absolute;top:0;right:0;width:320px}.roman-budget #roman-motion .r-demo-controls{margin-top:26px;justify-content:flex-start}.roman-budget #roman-motion figcaption{padding-top:14px}}