.wbm-gallery-wrapper, .wbm-gallery-image-wrapper, .wbm-gallery-filter-wrapper { position:relative; float:left; clear:both; width:100%; box-sizing:border-box; } .wbm-gallery-wrapper { margin-bottom:6rem; } .wbm-gallery-wrapper .wbm-gallery-image, .wbm-gallery-image-sizer { position:relative; float:left; width:calc( (100% - (var(--wbm-gallery-gutter) * (var(--wbm-gallery-columns) - 1))) / var(--wbm-gallery-columns) ); margin-bottom:var(--wbm-gallery-gutter); max-width:100%; } .wbm-gallery-wrapper .wbm-gallery-image a, .wbm-gallery-wrapper .wbm-gallery-image img { position:relative; float:left; height:auto !important; } @media(max-width:890px) { .wbm-gallery-wrapper .wbm-gallery-image, .wbm-gallery-image-sizer { width:calc( (100% - (var(--wbm-gallery-gutter) * (var(--wbm-gallery-columns-tablet) - 1))) / var(--wbm-gallery-columns-tablet) ); } } @media(max-width:580px) { .wbm-gallery-wrapper .wbm-gallery-image, .wbm_gallery_image-sizer { width:calc( (100% - (var(--wbm-gallery-gutter) * (var(--wbm-gallery-columns-mobile) - 1))) / var(--wbm-gallery-columns-mobile) ); } } .wbm-gallery-filter-wrapper { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:20px; } .wbm-gallery-filter-wrapper .wbm-gallery-filter-label { font-weight:bold; margin-bottom:10px; } .wbm-gallery-filter-wrapper .wbm-gallery-filter { margin-left:10px; margin-bottom:10px; background-color:#ebebeb; padding:5px 10px; line-height:1; white-space:nowrap; transition:color 200ms ease-out 0ms, background-color 200ms ease-out 0ms; } .wbm-gallery-filter-wrapper .wbm-gallery-filter:first-of-type { margin-left:0; } @media(max-width:580px) { .wbm-gallery-filter-wrapper .wbm-gallery-filter { margin-left:5px; }; .wbm-gallery-filter-wrapper .wbm-gallery-filter:first-of-type { margin-left:0; }; } .wbm-gallery-filter-wrapper .wbm-gallery-filter.active { background-color:#555; color:#fff; } @media(any-hover:hover) { .wbm-gallery-filter-wrapper .wbm-gallery-filter:not(.active):hover { background-color:#555; color:#fff; } } .sl-overlay { opacity:1; background-color:rgba(0,0,0,0.8); } .sl-wrapper * { color:#fff !important; backface-visibility:hidden; } .sl-wrapper .sl-counter { font-size:1.4rem; } .sl-wrapper .sl-close { transition:opacity 200ms ease-out 0ms; font-size:5rem !important; } .sl-wrapper .sl-next, .sl-wrapper .sl-prev { font-size:7rem !important; }