.screen-animation-section-wrapper{width:100%;background:rgb(var(--color-button));transition:background-color .3s ease}.screen-animation-section{max-width:1400px;margin:0 auto;padding:40px 20px}.screen-animation-section .section-heading{color:rgb(var(--color-foreground))}.screen-animation-section .section-description{color:rgba(var(--color-foreground),.75)}.section-heading{text-align:center;font-size:32px;margin-bottom:16px}.section-description{text-align:center;font-size:16px;margin-bottom:32px}.screen-animation-section .container{display:flex;justify-content:center}.screen-animation-section .display{width:480px!important;height:240px!important;position:relative;padding:10px;margin:10px;background-color:#111;border:10px solid #000;border-radius:2px;box-sizing:border-box;box-shadow:0 4px 8px #0003,0 6px 20px #00000030,-10px -10px 5px #00000040 inset}.screen-animation-section .display .background{position:relative;height:100%!important;width:100%!important;background-color:#000;background-size:15px auto;background-position:top left;background-repeat:repeat;display:flex;align-items:center;justify-content:center}.screen-animation-section .display .background svg{width:100%!important;height:100%!important;max-width:100%;max-height:100%}.screen-selector{display:flex;justify-content:center;gap:20px;padding:20px;flex-wrap:wrap;margin-top:20px}.screen-option{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:10px;border:1px solid transparent;border-radius:8px;transition:all .3s ease;background-color:#f5f5f5;min-width:120px}.screen-option:hover{border-color:#666;background-color:#e8e8e8;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.screen-option.active{border-color:#000;background-color:#fff;box-shadow:0 4px 12px #0000004d}.screen-option img{width:120px;height:auto;border-radius:4px;margin-bottom:8px;display:block}.screen-option span{font-size:14px;font-weight:700;color:#333;text-align:center}@media(min-width:768px){.screen-animation-section{padding:60px 20px}.section-heading{font-size:40px}.screen-option img{width:140px}}@media(min-width:900px){.screen-animation-section .display{width:960px!important;height:540px!important;padding:20px;margin:20px;border:40px solid #222222}.screen-animation-section .display .background{background-size:26.25px auto}.screen-animation-section .screen-option img{width:160px}.screen-animation-section .screen-selector{gap:30px;padding:30px}}.display .background p{color:#fff;padding:20px;text-align:center;font-family:monospace}
/*# sourceMappingURL=/cdn/shop/t/8/assets/screen-animation-selector.css.map */