.trigger[data-state=active]{scale:0;transform-origin:center;transition:transform .6s cubic-bezier(.4,0,.2,1),scale 0s}.trigger[data-state=inactive]{scale:1;transition:transform .6s cubic-bezier(.4,0,.2,1),scale .5s cubic-bezier(.4,0,.2,1)}.thumbnail-data{--thumbnail-width:160px;--thumbnail-height:90px;--thumbnail-left:16px}@media (min-width:640px){.thumbnail-data{--thumbnail-width:160px;--thumbnail-height:224px;--thumbnail-left:50%}}.thumbnail-enter-from .overlay{opacity:0}.thumbnail-enter-from .content{opacity:0;translate:0 -30px}.thumbnail-enter-active .background{animation:from-thumbnail 1s forwards}.thumbnail-enter-active .overlay{transition:all .5s ease 1s}.thumbnail-enter-active .content{transition:all .5s ease 1.5s}.thumbnail-leave-from,.thumbnail-leave-to{display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}@keyframes from-thumbnail{0%{bottom:40px;height:var(--thumbnail-height);left:var(--thumbnail-left);transform:translate(var(--translate-x));width:var(--thumbnail-width)}to{bottom:0;height:100%;left:0;transform:translate(0);width:100%}}.list-enter-active,.list-leave-active{transition:all .5s ease}