.device-state-animation .device-state-stage{position:relative;aspect-ratio:815/466;overflow:hidden;border-radius:8px;background:#fff;cursor:zoom-in}
.device-state-animation .device-state-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 350ms ease;border-radius:0}
.device-state-animation .device-state-stage img.is-active{opacity:1}
.device-state-navigation{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.device-state-navigation p{margin:0;color:#586770;font-size:11px;line-height:1.5}
.device-state-dots{display:flex;gap:4px;flex-shrink:0}
.device-state-dots button{display:grid;place-items:center;width:32px;height:32px;padding:4px;border:0;border-radius:16px;background:none;cursor:pointer}
.device-state-dots span{height:7px;width:7px;border:1px solid #7a9198;border-radius:10px;transition:width .25s,background .25s}
.device-state-dots button[aria-pressed=true] span{width:25px;background:#347d83;border-color:#347d83}
.device-state-dots button:hover{background:#347d8310}.device-state-dots button:focus-visible{outline:2px solid #347d83;outline-offset:2px}
@media(max-width:750px){.device-state-animation .device-state-stage{cursor:default}.device-state-navigation{align-items:flex-start;gap:8px}.device-state-navigation p{font-size:10px;padding-top:7px}}
@media(prefers-reduced-motion:reduce){.device-state-animation .device-state-stage img,.device-state-dots span{transition:none}}

.role-state-animation .device-state-stage{aspect-ratio:5/6}
.role-state-animation .device-state-stage img{object-fit:cover;object-position:center top}
@media(max-width:750px){.role-state-animation .device-state-stage{cursor:zoom-in}}

.device-state-animation:not(.role-state-animation) .device-state-stage>img:not(.device-state-fixed-offer){clip-path:inset(0 0 29.613734% 0)}
.device-state-animation .device-state-stage>.device-state-fixed-offer{opacity:1;transition:none}