*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}body{padding:1.5%;background:#e94057;background:-webkit-linear-gradient(to right,#f27121,#e94057,#8a2387);background:linear-gradient(to right,#f27121,#e94057,#8a2387)}img{max-width:100%;height:auto}ul.image-grid{column-count:8;font-size:0;z-index:5}li.card{list-style-type:none;z-index:5;cursor:pointer;display:inline-block;position:relative;margin:4px}@media (max-width:1200px){ul.image-grid{column-count:6}}@media (max-width:860px){ul.image-grid{column-count:4}}@media (max-width:600px){ul.image-grid{column-count:2}.image::after{font-size:10px}}.img-container{display:block;position:relative}.img-container.loaded::after{content:attr(data-ext);position:absolute;top:0;left:0;background:rgba(0,0,0,.8);color:#fff;line-height:1;font-size:11px;padding:4px 6px;border-radius:0 0 2px 0;text-transform:uppercase}.card-ready:hover .img-container::after,.js .card.gif .original{display:none}.js .card.gif{opacity:.5}.js .card-ready.gif:hover .original,.js .card.gif .frame{display:block}.js .card-ready.gif{opacity:1}.viewing .card.open{z-index:10;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.8);width:100%;height:100%;margin:0}.viewing .img-container{position:static}.viewing .card.open .original{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90%;max-height:90%}.js .card-ready.gif:hover .frame,.viewing .card.open .frame,.viewing .img-container::after{display:none}