.animation{--clr-device: hsl(0, 0%, 7%);--clr-display: hsl(210, 29%, 29%);display:inline-block;position:relative;margin-inline:auto;height:320px;width:100%}@media(min-width: 58em){.animation{height:410px}}.animation div{position:absolute}.animation[data-animation-step="1"] .device{--_device-max-width: 400px;aspect-ratio:1.8;padding:7px;border-radius:4px}@media(min-width: 58em){.animation[data-animation-step="1"] .device{--_device-max-width: 650px;padding:10px}}.animation[data-animation-step="1"] .device [data-slide="1"]{left:0}.animation[data-animation-step="1"] .device .screen-stand{opacity:1;top:100%}.animation[data-animation-step="2"] .device{--_device-max-width: 250px;aspect-ratio:.78;padding:15px;border-radius:10px}@media(min-width: 58em){.animation[data-animation-step="2"] .device{--_device-max-width: 320px;padding:24px}}.animation[data-animation-step="2"] .device [data-slide="2"]{left:0}.animation[data-animation-step="2"] .device .tablet-home-button{opacity:1}.animation[data-animation-step="3"] .device{--_device-max-width: 300px;aspect-ratio:1.98;padding:8px 18px;border-radius:6px}@media(min-width: 58em){.animation[data-animation-step="3"] .device{--_device-max-width: 450px;padding:10px 36px}}.animation[data-animation-step="3"] .device [data-slide="3"]{left:0}.animation[data-animation-step="3"] .device .phone-home-button{opacity:1}.device{width:min(100%,var(--_device-max-width));left:50%;top:50%;background:var(--clr-device);transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);transform:translate(-50%, -50%)}.device__button{border-radius:50%;background:#444;opacity:0;z-index:1;transition:all .4s ease;width:10px;height:10px}.device__button.tablet-home-button{margin-left:-5px;bottom:3px;left:50%}@media(min-width: 58em){.device__button.tablet-home-button{width:12px;height:12px;margin-left:-6px;bottom:7px}}.device__button.phone-home-button{margin-top:-5px;right:5px;top:50%}@media(min-width: 58em){.device__button.phone-home-button{width:16px;height:16px;margin-top:-8px;right:11px}}.screen-stand{width:100%;margin-left:-10px;margin-top:-1px;top:60%;opacity:0;z-index:1;transition:all .4s ease-out}.screen-stand .leg{width:12px;height:16px;left:50%;top:0;margin-left:-6px;background:var(--clr-device)}.screen-stand .foot{width:120px;height:4px;left:50%;top:15px;margin-left:-60px;border-top-left-radius:2px;border-top-right-radius:2px;background:var(--clr-device)}.device__display{position:relative !important;width:100%;height:100%;overflow:hidden;background:var(--clr-display);z-index:3}.device__display .slide{width:100%;height:100%;left:100%;white-space:nowrap;background:var(--clr-display) var(--_bkg-url) center center no-repeat;background-size:cover}.device__display .slide[data-slide="1"]{--_bkg-url: url("../img/photos/re/slides/slide_1.webp")}.device__display .slide[data-slide="2"]{--_bkg-url: url("../img/photos/re/slides/slide_2.webp")}.device__display .slide[data-slide="3"]{--_bkg-url: url("../img/photos/re/slides/slide_3.webp")}