.ml-gallery-container {
margin: 1em 0;
padding: 0;
list-style: none;
--ml-columns: 3;
--ml-gap: 8px;
--ml-corner-inset: calc(var(--ml-corner-radius, 0px) * 0.2929);
}
.ml-gallery-container > a {
display: block;
overflow: hidden;
line-height: 0;
text-decoration: none;
}
.ml-gallery-container > a img {
display: block;
width: 100%;
transition: opacity .2s ease;
}
.ml-gallery-container > a:hover img {
opacity: .85;
} .ml-gallery-container.ml-layout-grid {
display: grid;
grid-template-columns: repeat(var(--ml-columns), 1fr);
gap: var(--ml-gap);
}
.ml-gallery-container.ml-layout-grid > a img {
height: var(--ml-row-height, 220px);
object-fit: cover;
} .ml-gallery-container.ml-layout-masonry {
columns: var(--ml-columns);
column-gap: var(--ml-gap);
}
.ml-gallery-container.ml-layout-masonry > a {
break-inside: avoid;
margin-bottom: var(--ml-gap);
}
.ml-gallery-container.ml-layout-masonry > a img {
height: auto;
object-fit: unset;
} .ml-gallery-container.ml-layout-justified {
display: flex;
flex-wrap: wrap;
gap: var(--ml-gap);
} .ml-gallery-container.ml-layout-justified > a {
flex: 1 1 auto;
height: var(--ml-row-height, 220px);
overflow: hidden;
}
.ml-gallery-container.ml-layout-justified > a img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: bottom;
}  .ml-gallery-container.ml-layout-carousel {
position: relative;
height: 500px;
z-index: 0;
--ml-stage-inset-top: 52px;
}
.ml-gallery-container.ml-layout-carousel[data-lg-thumbnails="1"] {
--ml-stage-inset-bottom: 90px;
}
.ml-gallery-container .ml-gallery-stage-button {
top: calc(10px + var(--ml-corner-inset, 0px) + var(--ml-stage-inset-top, 0px)) !important;
right: calc(10px + var(--ml-corner-inset, 0px)) !important;
}
.ml-gallery-container.ml-layout-carousel .ml-gallery-stage-button {
z-index: 100002;
} .ml-gallery-container.ml-layout-carousel > a {
display: none;
} .ml-gallery-container.ml-layout-carousel .lg-object {
object-fit: contain;
max-height: 100%;
width: auto;
max-width: 100%;
} .ml-gallery-block.is-full-width {
width: 100vw;
margin-left: calc(50% - 50vw);
} .ml-gallery-container.ml-layout-showcase > a {
display: none;
}
.ml-showcase-stage {
position: relative;
width: 100%;
overflow: hidden;
cursor: pointer;
}
.ml-showcase-stage .ml-showcase-img {
display: block;
width: 100%;
height: 420px;
object-fit: cover;
} .ml-showcase-stage .ml-showcase-img[hidden] {
display: none;
}
.ml-showcase-stage .ml-showcase-player {
display: block;
width: 100%;
height: 420px;
border: 0;
background: #000;
object-fit: contain;
}
.ml-showcase-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2; margin: 0;
padding: 12px 16px;
line-height: 1.35;
color: var(--ml-thumb-caption-color, #ffffff);
font-size: var(--ml-thumb-caption-size, 14px);
text-align: var(--ml-thumb-caption-align, left);
background: var(--ml-thumb-caption-bg, linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)));
}
.ml-showcase-incoming {
position: absolute;
top: 0;
left: 0;
}
.ml-showcase-incoming.ml-tr-fade {
opacity: 0;
}
.ml-showcase-incoming.ml-tr-slide-next {
transform: translateX(100%);
}
.ml-showcase-incoming.ml-tr-slide-prev {
transform: translateX(-100%);
}
.ml-showcase-incoming.ml-tr-zoom {
opacity: 0;
transform: scale(1.15);
}
.ml-showcase-incoming.ml-tr-active {
opacity: 1;
transform: translateX(0) scale(1);
transition: transform 0.45s ease, opacity 0.45s ease;
} .ml-showcase-cap-fade {
animation: ml-showcase-cap-fade 0.4s ease;
}
.ml-showcase-cap-slide-up {
animation: ml-showcase-cap-slide-up 0.4s ease;
}
.ml-showcase-cap-slide-down {
animation: ml-showcase-cap-slide-down 0.4s ease;
}
@keyframes ml-showcase-cap-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes ml-showcase-cap-slide-up {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes ml-showcase-cap-slide-down {
from { opacity: 0; transform: translateY(-20px); }
to   { opacity: 1; transform: translateY(0); }
}
.ml-showcase-thumbs {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 8px 0;
}
.ml-showcase-thumb {
flex-shrink: 0;
padding: 0;
border: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
background: none;
overflow: hidden;
opacity: 0.6;
transition: opacity .15s, border-color .15s;
}
.ml-showcase-thumb img {
display: block;
width: 80px;
height: 56px;
object-fit: cover;
}
.ml-showcase-thumb:hover,
.ml-showcase-thumb.is-active {
opacity: 1;
}
.ml-showcase-thumb.is-active {
border-color: var(--ml-orange, #dd6923);
}
.ml-showcase-nav {
display: flex;
align-items: center;
padding: 12px 0;
}
.ml-showcase-btn {
border: none;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 6px 10px;
border-radius: 3px;
background-color: var(--ml-arrow-bg, #000);
color: var(--ml-arrow-color, #fff);
}
.ml-showcase-btn:hover {
opacity: 0.85;
}
.ml-showcase-counter {
flex: 1;
font-size: 14px;
text-align: center;
background-color: var(--ml-toolbar-bg, #000);
color: var(--ml-toolbar-color, #fff);
padding: 6px 8px;
}
.ml-showcase-pager {
display: flex;
justify-content: center;
gap: 6px;
padding: 8px 0;
}
.ml-showcase-pager-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
background-color: var(--ml-toolbar-bg, #000);
opacity: 0.35;
transition: opacity 0.2s;
}
.ml-showcase-pager-dot:hover {
opacity: 0.65;
}
.ml-showcase-pager-dot.is-active {
opacity: 1;
} @media (max-width: 767px) {
.ml-gallery-container.ml-layout-grid {
grid-template-columns: repeat(var(--ml-columns-mobile, 1), 1fr);
}
.ml-gallery-container.ml-layout-masonry {
columns: var(--ml-columns-mobile, 1);
}
.ml-showcase-stage .ml-showcase-img,
.ml-showcase-stage .ml-showcase-player {
height: 260px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.ml-gallery-container.ml-layout-grid {
grid-template-columns: repeat(var(--ml-columns-tablet, var(--ml-columns)), 1fr);
}
.ml-gallery-container.ml-layout-masonry {
columns: var(--ml-columns-tablet, var(--ml-columns));
}
}
@media (min-width: 1024px) and (max-width: 1439px) {
.ml-gallery-container.ml-layout-grid {
grid-template-columns: repeat(var(--ml-columns-laptop, var(--ml-columns)), 1fr);
}
.ml-gallery-container.ml-layout-masonry {
columns: var(--ml-columns-laptop, var(--ml-columns));
}
} .ml-gallery-container[data-ml-lightbox="0"] a {
pointer-events: none;
cursor: default;
}  .ml-gallery-container > a.ml-gallery-video {
position: relative;
} .ml-gallery-video--poster::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba( 0, 0, 0, 0.55 ) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
pointer-events: none;
} .ml-gallery-caption {
display: none;
}
.ml-gallery-container.ml-has-thumb-captions > a {
position: relative;
}
.ml-gallery-container.ml-has-thumb-captions .ml-gallery-caption {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 10px calc(12px + var(--ml-corner-inset, 0px)) calc(10px + var(--ml-corner-inset, 0px));
line-height: 1.35; color: var(--ml-thumb-caption-color, #ffffff);
font-size: var(--ml-thumb-caption-size, 14px);
text-align: var(--ml-thumb-caption-align, left);
background: var(--ml-thumb-caption-bg, linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)));
}
.ml-gallery-caption > *,
.ml-showcase-caption > * {
margin: 0;
}
.ml-gallery-container.ml-caption-pos-top .ml-gallery-caption,
.ml-gallery-container.ml-caption-pos-top .ml-showcase-caption,
.ml-gallery-container.ml-caption-pos-top .lg-sub-html {
top: 0;
bottom: auto;
}
.ml-gallery-container.ml-caption-pos-top .ml-gallery-caption {
padding: calc(10px + var(--ml-corner-inset, 0px)) calc(12px + var(--ml-corner-inset, 0px)) 10px;
}
.ml-gallery-container.ml-layout-carousel.ml-caption-pos-top .lg-sub-html {
top: 47px;
}
.ml-gallery-container.ml-caption-pos-middle .ml-gallery-caption,
.ml-gallery-container.ml-caption-pos-middle .ml-showcase-caption,
.ml-gallery-container.ml-caption-pos-middle .lg-sub-html {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
.ml-gallery-container.ml-caption-pos-middle .ml-gallery-caption {
padding: 10px calc(12px + var(--ml-corner-inset, 0px));
}
.ml-gallery-container.ml-caption-pos-middle .ml-showcase-cap-slide-up,
.ml-gallery-container.ml-caption-pos-middle .ml-showcase-cap-slide-down {
animation-name: ml-showcase-cap-fade;
}
@media (hover: hover) {
.ml-gallery-container.ml-caption-hover .ml-gallery-caption,
.ml-gallery-container.ml-caption-hover .ml-showcase-caption,
.ml-gallery-container.ml-caption-hover .lg-container .lg-outer .lg-sub-html {
opacity: 0;
transition: opacity .25s ease;
}
.ml-gallery-container.ml-caption-hover > a:hover .ml-gallery-caption,
.ml-gallery-container.ml-caption-hover > a:focus-visible .ml-gallery-caption,
.ml-gallery-container.ml-caption-hover .ml-showcase-stage:hover .ml-showcase-caption,
.ml-gallery-container.ml-caption-hover .lg-container:hover .lg-outer .lg-sub-html,
.ml-gallery-container.ml-caption-hover .lg-container:focus-within .lg-outer .lg-sub-html {
opacity: 1;
}
.ml-gallery-container.ml-caption-hover .ml-showcase-cap-fade,
.ml-gallery-container.ml-caption-hover .ml-showcase-cap-slide-up,
.ml-gallery-container.ml-caption-hover .ml-showcase-cap-slide-down {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ml-gallery-container.ml-caption-hover .ml-gallery-caption,
.ml-gallery-container.ml-caption-hover .ml-showcase-caption,
.ml-gallery-container.ml-caption-hover .lg-container .lg-outer .lg-sub-html {
transition: none;
}
} .ml-gallery-container > a.ml-item-hidden {
display: none;
}
.ml-load-more-wrap {
display: flex;
justify-content: center;
margin-top: var(--ml-gap, 8px);
}
.ml-load-more {
padding: 10px 22px;
border: 0;
border-radius: 4px;
background-color: #000000;
color: #ffffff;
font-size: 14px;
line-height: 1.4;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.ml-load-more:hover,
.ml-load-more:focus {
background-color: #f0f0f0;
color: #000000;
}
.ml-load-more-status {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}