/** * The following styles get applied both on the front of your site * and in the editor. * * Replace them with your own styles or remove the file completely. */ .wp-block-create-block-gallery { background-color: #21759b; color: #fff; padding: 2px; } .admin-bar .lg-container:not(.lg-inline) .lg-outer {top:32px;height:calc(100% - 32px)!important} .lcp-inline-gallery { width: 100%; height: 500px; position: relative; } .lcp-inline-gallery .lcp-gallery-item .img-fluid { display:none } .lcp-gallery .gallery-item,.lcp-gallery .gallery-item > img { width:100% } .lcp-gallery .gallery-item.last:after {content:"";width:100%;height:100%;background:red;position:absolute;top:0;left:0;opacity:.5} // Thumbnails .lg-thumbnail-grayscale .lg-thumb-item:not(.active) img {filter: grayscale(100%);} .lg-thumbnail-active-grayscale .lg-thumb-item.active img {filter: grayscale(100%);} .lg-thumbnail-blur .lg-thumb-item:not(.active) img {filter: blur(1px);} .lg-thumbnail-active-blur .lg-thumb-item.active img {filter: blur(1px);} .lg-outer {background:none} // Gallery More Images .lcp-display-none {display:none} .gallery-item {position:relative} span.gallery-more {position: absolute; position: absolute; left: 50%; top: 50%; z-index: 10; color: #fff; font-size: 40px; transform: translate3d(-50%, -50%, 0); color: white;} /* Aspect Ratio */ .lcp-gallery.aspect-1-1 .lcp-gallery-item {aspect-ratio:1/1} .lcp-gallery.aspect-2-3 .lcp-gallery-item {aspect-ratio:2/3} .lcp-gallery.aspect-3-4 .lcp-gallery-item {aspect-ratio:3/4} .lcp-gallery.aspect-4-5 .lcp-gallery-item {aspect-ratio:4/5} .lcp-gallery.aspect-5-7 .lcp-gallery-item {aspect-ratio:5/7} .lcp-gallery.aspect-3-2 .lcp-gallery-item {aspect-ratio:3/2} .lcp-gallery.aspect-16-9 .lcp-gallery-item {aspect-ratio:16/9} .gallery-item img {object-fit:cover} /* Container Styles */ /* Grid Styles */ .lcp-gallery.grid { display:grid } .lcp-gallery.grid .gallery-item img{ height:100%; object-fit:cover } .lcp-gallery.grid { gap:1rem; grid-template-columns: 1fr 1fr 1fr 1fr } @media only screen and (min-width: 1167px) { .lcp-gallery.grid.large-1-columns { grid-template-columns: 1fr; } .lcp-gallery.grid.large-2-columns { grid-template-columns: 1fr 1fr; } .lcp-gallery.grid.large-3-columns { grid-template-columns: 1fr 1fr 1fr; } .lcp-gallery.grid.large-4-columns { grid-template-columns: 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.large-5-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.large-6-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.large-7-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.large-8-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.large-9-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } /* Medium screens (min-width: 768px and max-width: 1166px) */ @media only screen and (min-width: 768px) and (max-width: 1166px) { .lcp-gallery.grid.medium-1-columns { grid-template-columns: 1fr; } .lcp-gallery.grid.medium-2-columns { grid-template-columns: 1fr 1fr; } .lcp-gallery.grid.medium-3-columns { grid-template-columns: 1fr 1fr 1fr; } .lcp-gallery.grid.medium-4-columns { grid-template-columns: 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.medium-5-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.medium-6-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.medium-7-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.medium-8-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.medium-9-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } /* Small screens (max-width: 767px) */ @media only screen and (max-width: 767px) { .lcp-gallery.grid.small-1-columns { grid-template-columns: 1fr; } .lcp-gallery.grid.small-2-columns { grid-template-columns: 1fr 1fr; } .lcp-gallery.grid.small-3-columns { grid-template-columns: 1fr 1fr 1fr; } .lcp-gallery.grid.small-4-columns { grid-template-columns: 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.small-5-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.small-6-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.small-7-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.small-8-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .lcp-gallery.grid.small-9-columns { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } .lcp-gallery.grid > a > img { width:100%; height:100%; object-fit:cover } .lcp-gallery.grid>a>img { height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; display: block; /* Add this */ }