j-gallery/example/node_modules/_j-gallery@1.2.1@j-gallery/dist/gallery.min.css

a picture layout library

*{margin:0;padding:0}html{overflow-y:scroll}:root{overflow-y:auto;overflow-x:hidden}:root body{position:absolute}body{width:100vw;overflow:hidden}.gallery{width:80%;margin:0 auto}.galleryBox{-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;width:100%;min-width:500px;overflow:hidden;font-size:0;-webkit-text-size-adjust:none}.puzzleBox{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box}.puzzleBox img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.count1>.puzzleBox:first-child,.puzzleBox img{width:100%;height:100%}.count2>.puzzleBox:first-child{position:absolute;left:0;width:66.66667%;height:100%}.count2>.puzzleBox:nth-child(2){position:absolute;right:0;width:66.66667%;height:100%;clip-path:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMCIgaGVpZ2h0PSIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGNsaXBQYXRoIGlkPSJjbGlwIiBjbGlwUGF0aFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIwLjUgMCwxIDAsMSAxLDAgMSI+CiAgICAgICAgPC9wb2x5Z29uPgogICAgPC9jbGlwUGF0aD4KPC9zdmc+#clip);-webkit-clip-path:polygon(50% 0,100% 0,100% 100%,0 100%)}.count3>.puzzleBox:first-child{height:100%;width:66.66667%;float:left}.count3>.puzzleBox:nth-child(2),.count3>.puzzleBox:nth-child(3){height:50%;width:33.33333%}.count4>.puzzleBox{height:50%;width:50%;float:left}.count5>.puzzleBox:first-child{height:66.66667%;width:66.66667%}.count5>.puzzleBox:nth-child(2){position:absolute;top:0;right:0;width:33.33333%}.count5>.puzzleBox:nth-child(3){position:absolute;right:0;bottom:0;width:33.33333%}.count5>.puzzleBox:nth-child(4){position:absolute;left:33.33333%;bottom:0;width:33.33333%;height:33.33333%}.count5>.puzzleBox:nth-child(5){position:absolute;left:0;bottom:0;width:33.33333%;height:33.33333%}.count6>.puzzleBox:first-child{height:66.66667%;width:66.66667%}.count6>.puzzleBox:nth-child(2){position:absolute;top:0;right:0;width:33.33333%;height:33.33333%}.count6>.puzzleBox:nth-child(3){position:absolute;top:33.33333%;right:0;width:33.33333%;height:33.33333%}.count6>.puzzleBox:nth-child(4){position:absolute;right:0;bottom:0;width:33.33333%;height:33.33333%}.count6>.puzzleBox:nth-child(5){position:absolute;left:33.33333%;bottom:0;width:33.33333%;height:33.33333%}.count6>.puzzleBox:nth-child(6){position:absolute;left:0;bottom:0;width:33.33333%;height:33.33333%}.waterfallBox{display:inline-block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.waterfallBox img{width:100%}.waterfallColumn{float:left}.barrelRow{overflow:hidden;white-space:nowrap}.barrelBox{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:0;-webkit-text-size-adjust:none}.barrelBox,.barrelBox img{height:100%}.gallery-view{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.85);z-index:1}.gallery-view-img{width:100%;height:calc(100% - 200px);overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gallery-view-close{position:absolute;top:10px;right:10px;width:30px;line-height:30px;border-radius:20px;font-weight:700;font-size:18px;text-align:center;color:#fff;background:red;cursor:pointer}.gallery-view-list{width:100%;height:200px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gallery-view-list img{height:180px;width:250px;margin:5px;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;cursor:pointer}.gallery-view--current{border:3px solid #ff0}