.gallery{--transition-time:.4s;--height-gallery:100%;height:var(--height-gallery);--mini-height:0px;--mini-img-size:60px;--mini-img-margin-hor:2px;--mini-img-border:1px solid #969696;--mini-img-border-radius:4px;--mini-current-border-style:solid red;--counter-width:48px;--counter-height:32px;--counter-offset-hor:16px;--counter-offset-ver:16px;--counter-border-radius:8px;--counter-background-color:hsla(0,0%,100%,.66);--counter-color:rgba(0,0,0,.82);--counter-font-family:sans-serif;--counter-font-size:14px;--counter-font-weight:700;--arrow-offset:16px;--arrow-color-transition:.2s ease;--arrow-icon-background-size:44px;--arrow-icon-background-color:hsla(0,0%,100%,.56);--arrow-icon-background-color-hover:#fff;--arrow-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 17 16"><path d="M8.7 1.7A1 1 0 107.3.3l-7 7a1 1 0 000 1.4l7 7a1 1 0 001.4-1.4L3.4 9H16a1 1 0 000-2H3.4l5.3-5.3z" fill="currentColor"/></svg>');--arrow-icon-widht:17px;--arrow-icon-height:16px;--arrow-icon-color:rgba(0,0,0,.56);--arrow-icon-color-hover:rgba(0,0,0,.92);--zoom-display:flex;--zoom-offset-ver:var(--arrow-offset);--zoom-offset-hor:var(--arrow-offset);--zoom-color-transition:var(--arrow-color-transition);--zoom-background-color:#000;--zoom-icon-background-size:var(--arrow-icon-background-size);--zoom-icon-background-color:var(--arrow-icon-background-color);--zoom-icon-background-color-hover:var(--arrow-icon-background-color-hover);--zoom-in-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.1 5.8 13.8.1l2.1 2.1-5.7 5.7z'/%3E%3Cpath d='M16 6.5V0H9.5zm-8.1 3.7-5.7 5.7-2.1-2.1 5.7-5.7z'/%3E%3Cpath d='M0 9.5V16h6.5z'/%3E%3C/svg%3E");--zoom-out-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.6 7 .3 1.7C-.7.7.8-.6 1.7.3L7 5.6 12.3.3c1-1 2.3.5 1.4 1.4L8.4 7l5.3 5.3c1 1-.5 2.3-1.4 1.4L7 8.4l-5.3 5.3c-1 1-2.3-.5-1.4-1.4z'/%3E%3C/svg%3E");--zoom-icon-width:16px;--zoom-icon-height:16px;--zoom-icon-color:var(--arrow-icon-color);--zoom-icon-color-hover:var(--arrow-icon-color-hover);position:relative}.gallery,.gwrapper{left:0;width:100%;top:0}.gwrapper{position:absolute!important;height:100%;overflow:hidden;display:flex;flex-flow:column nowrap;background-color:#f5f5f5}.gallery img{margin:0}.gallery[data-z] .gwrapper{z-index:1000;position:fixed;top:0;left:0;background-color:var(--zoom-background-color);width:100vw;height:100vh}.gallery .gmain{display:flex;flex-flow:column nowrap;width:100%;flex-grow:1;flex-shrink:1}.gallery .gmain .gcontent{position:relative;left:0;transition:left var(--transition-time);display:flex;align-items:stretch;width:var(--content-main-width);flex-grow:1;flex-shrink:1}.gallery .img-wrap{width:var(--image-width);height:auto;position:relative;display:inline-block;overflow:hidden;margin:0}.gallery .mini .img-wrap{box-sizing:border-box}.gallery img{display:block;position:absolute;top:50%;left:50%;min-height:100%;max-height:100%;min-width:100%;transform:translate(-50%,-50%);width:100%;-o-object-fit:contain;object-fit:contain}.gallery[data-z] .gmain img{width:100%;min-height:inherit;min-width:inherit}@media screen and (orientation:portrait){.gallery[data-z] .gmain img{width:100%;max-height:100%}}@media screen and (orientation:landscape){.gallery[data-z] .gmain img{height:100%;max-width:100%}}.gallery .mini{position:relative;flex-grow:0;flex-shrink:0;flex-basis:var(--mini-height)}@media screen and (orientation:landscape){.gallery[data-z] .mini{flex-basis:0;overflow:hidden}}.gallery .mini .current{position:absolute;top:0;top:calc(100% - var(--mini-img-size) - var(--mini-img-margin-hor)*2);width:calc(var(--mini-img-size) + var(--mini-img-margin-hor)*2);box-sizing:border-box;border:var(--mini-img-margin-hor) var(--mini-current-border-style);border-radius:calc(var(--mini-img-border-radius) + var(--mini-img-margin-hor));pointer-events:none}.gallery .mini .current,.gallery .mini .gcontent{left:0;height:100%;transition:left var(--transition-time);display:var(--mini-display)}.gallery .mini .gcontent{position:relative;align-items:center;width:var(--content-mini-width)}.gallery .mini .gcontent div{width:var(--mini-img-size);height:var(--mini-img-size);border-radius:var(--mini-img-border-radius);margin-left:var(--mini-img-margin-hor);cursor:pointer;border:var(--mini-img-border);box-sizing:border-box;background-repeat:no-repeat;background-size:cover;background-position:50%}.gallery .mini div:last-of-type{margin-right:var(--mini-img-margin-hor)}.gallery .zoom{position:absolute;width:var(--zoom-icon-background-size);height:var(--zoom-icon-background-size);top:var(--zoom-offset-ver);right:var(--zoom-offset-hor);background-color:var(--zoom-icon-background-color);border-radius:50%;display:var(--zoom-display);align-items:center;justify-content:center;cursor:pointer}.gallery .zoom,.gallery .zoom div{transition:background-color var(--zoom-color-transition)}.gallery .zoom div{width:var(--zoom-icon-width);height:var(--zoom-icon-height);background-color:var(--zoom-icon-color);background-image:var(--zoom-in-icon);width:20px;height:20px;background-color:transparent}.gallery .zoom:hover{background-color:var(--zoom-icon-background-color-hover)}.gallery[data-z] .zoom div{background-image:var(--zoom-out-icon)}.gallery .counter{position:absolute;left:var(--counter-offset-hor);top:var(--counter-offset-ver);width:var(--counter-width);height:var(--counter-height)}.gallery .counter div{width:100%;height:100%;bottom:var(--counter-offset-bottom);background-color:var(--counter-background-color);border-radius:var(--counter-border-radius);align-items:center;color:var(--counter-color);font-family:var(--counter-font-family);font-size:var(--counter-font-size);font-weight:var(--counter-font-weight)}.gallery .arrow-panel,.gallery .counter div{position:absolute;display:flex;justify-content:center}.gallery .arrow-panel{width:30%;height:calc(100% - var(--mini-height));flex-direction:column;top:0}.gallery .arrow-panel.left{left:0}.gallery .arrow-panel.right{right:0}.gallery .arrow{width:var(--arrow-icon-background-size);height:var(--arrow-icon-background-size);cursor:pointer;align-self:flex-end;border-radius:50%;background-color:var(--arrow-icon-background-color);transition:background-color var(--arrow-color-transition);display:flex;align-items:center;justify-content:center;margin:0 var(--arrow-offset)}.gallery .left .arrow{align-self:flex-start}.gallery .right .arrow{align-self:flex-end}.gallery .arrow div{width:12px;height:12px;border-top:3px solid var(--arrow-icon-color);border-right:3px solid var(--arrow-icon-color);margin-right:-6px;transform:rotate(-135deg)}.gallery .arrow-panel.right .arrow div{margin-right:6px;transform:rotate(44deg)}