.ml-gallery-container {
margin: 1em 0;
padding: 0;
list-style: none;
--ml-columns: 3;
--ml-gap: 8px;
}
.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: 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-grow: 1;
overflow: hidden;
}
.ml-gallery-container.ml-layout-justified > a img {
height: 220px;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
} .ml-gallery-container.ml-layout-justified > a:last-child {
flex-grow: 0;
}  .ml-gallery-container.ml-layout-carousel {
position: relative;
height: 500px;
} .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 {
width: 100%;
overflow: hidden;
cursor: pointer;
}
.ml-showcase-stage .ml-showcase-img {
display: block;
width: 100%;
height: 420px;
object-fit: cover;
}
.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;
}
@media (max-width: 768px) {
.ml-gallery-container.ml-layout-grid,
.ml-gallery-container.ml-layout-masonry {
--ml-columns: var(--ml-columns-mobile, 1);
}
.ml-showcase-stage .ml-showcase-img {
height: 260px;
}
}