.scroller-wrapper{display:block;border:4px solid #f0f0f0;border-radius:1em;position:relative;width:100%;padding-bottom:calc(100% - 2 * 4px)}.scroller-wrapper .scroller-square{border:4px solid #fff;border-radius:1em;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background-size:cover}.scroller-wrapper .scroller-square .scroller-images{border-radius:1em;width:100%;position:absolute;animation:image-scroll-back 1.5s;left:0;-webkit-filter:grayscale(100%);filter:grayscale(100%)}.scroller-wrapper .scroller-square .scroller-info{position:absolute;right:.25em;bottom:.25em;transition:0s}.scroller-wrapper:hover .scroller-images{animation:image-scroll linear infinite;animation-duration:var(--scroller-duration,5000ms);-webkit-filter:grayscale(0%)}.scroller-wrapper:hover .scroller-info{opacity:0;transition:.5s}@keyframes image-scroll{to{transform:translateY(-50%)}}@keyframes image-scroll-back{from{opacity:0}to{opacity:1}}