.w-gallery-list {
display: grid;
grid-template-columns: repeat( var(--columns, 1), 1fr );
gap: var(--items-gap, 0);
}
.w-gallery-item {
position: relative;
color: inherit !important;
width: 100%;
}
.w-gallery-item-img {
height: 100%;
}
.w-gallery-item-img img {
display: block;
height: inherit;
width: 100%;
object-fit: cover;
background: rgba(128,128,128,.1); }
.gallery-caption, .w-gallery-item-meta {
pointer-events: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 100%;
font-size: .85em;
line-height: 1.5;
padding: 3em 1.2em .8em;
overflow: hidden;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
background: linear-gradient(transparent, rgba(30,30,30,0.8)) repeat-x;
color: #fff;
}
.w-gallery-item-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
} .w-gallery-no-results {
text-align: center;
padding: 2rem;
margin: 0;
background: var(--color-content-bg-alt-grad);
color: var(--color-content-text);
} .w-gallery-loadmore {
text-align: center;
position: relative;
margin-top: var(--btn-indent, 1.5em);
}
.w-gallery-loadmore.done {
display: none;
}
.w-gallery-loadmore .g-preloader,
.w-gallery-loadmore.loading .w-btn {
opacity: 0;
}
.w-gallery-loadmore.loading .g-preloader {
opacity: 1;
}
.w-gallery-loadmore .w-btn {
z-index: 1;
}
.w-gallery-loadmore .w-btn + .g-preloader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.w-gallery-loadmore.width_full .w-btn {
width: 100%;
} .w-gallery.wp_gallery:not(:last-child) {
margin-bottom: 1.5rem;
}
.w-gallery.wp_gallery .w-gallery-item-meta {
position: static;
font-size: inherit;
text-align: center;
padding: .3rem 1rem .7rem;
background: none;
color: inherit;
}
.w-gallery.wp_gallery .w-gallery-item-description {
font-size: .9rem;
margin: 0.2rem 0;
opacity: .5;
} .w-gallery.ratio_1x1 .w-gallery-item {
aspect-ratio: 1;
}
.w-gallery.ratio_4x3 .w-gallery-item {
aspect-ratio: 4/3;
}
.w-gallery.ratio_3x2 .w-gallery-item {
aspect-ratio: 3/2;
}
.w-gallery.ratio_16x9 .w-gallery-item {
aspect-ratio: 16/9;
}
.w-gallery.ratio_2x3 .w-gallery-item {
aspect-ratio: 2/3;
}
.w-gallery.ratio_3x4 .w-gallery-item {
aspect-ratio: 3/4;
}
.w-gallery.ratio_custom .w-gallery-item {
aspect-ratio: var(--items-ratio-width, 21) / var(--items-ratio-height, 9);
} .w-gallery.type_masonry .w-gallery-list {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 0;
margin: calc( var(--items-gap, 0) / -2 );
}
.w-gallery.type_masonry .w-gallery-item {
flex-shrink: 0;
width: calc( 100% / var(--columns, 1) );
padding: calc( var(--items-gap, 0) / 2 );
}
.w-gallery.type_masonry .w-gallery-item-meta {
left: calc( var(--items-gap, 0) / 2 );
right: calc( var(--items-gap, 0) / 2 );
bottom: calc( var(--items-gap, 0) / 2 );
} .w-gallery.type_metro_1 .w-gallery-list {
grid-template-columns: repeat( 3, 1fr );
grid-auto-flow: dense;
}
.w-gallery.type_metro_1 .w-gallery-item:nth-child(6n+2),
.w-gallery.type_metro_1 .w-gallery-item:nth-child(6n+4) {
grid-column: span 2;
grid-row: span 2;
} .w-gallery.type_metro_2 .w-gallery-list {
grid-template-columns: repeat( 4, 1fr );
grid-auto-flow: dense;
}
.w-gallery.type_metro_2 .w-gallery-item:nth-child(6n+3),
.w-gallery.type_metro_2 .w-gallery-item:nth-child(6n+4) {
grid-column: span 2;
grid-row: span 2;
} .w-gallery.type_metro_3 .w-gallery-list {
grid-template-columns: repeat( 4, 1fr );
grid-auto-flow: dense;
}
.w-gallery.type_metro_3 .w-gallery-item:nth-child(10n+3),
.w-gallery.type_metro_3 .w-gallery-item:nth-child(10n+6) {
grid-column: span 2;
grid-row: span 2;
} .w-gallery.type_metro_4 .w-gallery-list {
grid-template-columns: repeat( 5, 1fr );
grid-auto-flow: dense;
}
.w-gallery.type_metro_4 .w-gallery-item:nth-child(18n+3),
.w-gallery.type_metro_4 .w-gallery-item:nth-child(18n+5),
.w-gallery.type_metro_4 .w-gallery-item:nth-child(18n+11),
.w-gallery.type_metro_4 .w-gallery-item:nth-child(18n+15) {
grid-column: span 2;
grid-row: span 2;
} .w-gallery.type_mosaic_hor .w-gallery-list {
grid-template-columns: repeat( 12, 1fr );
}
.w-gallery.type_mosaic_hor .w-gallery-item {
aspect-ratio: auto;
height: var(--items-height, 350px);
}
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+1),
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+6),
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+8) {
grid-column: span 5;
}
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+2),
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+4),
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+9) {
grid-column: span 3;
}
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+3),
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+5),
.w-gallery.type_mosaic_hor .w-gallery-item:nth-child(9n+7) {
grid-column: span 4;
} .w-gallery.type_mosaic_ver .w-gallery-list {
grid-template: repeat(12, 100px) / repeat( 3, 1fr );
}
.w-gallery.type_mosaic_ver .w-gallery-item {
aspect-ratio: auto !important;
}
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+1),
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+6),
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+8) {
grid-row: span 2;
}
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+2),
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+4),
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+9) {
grid-row: span 3;
}
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+3),
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+5),
.w-gallery.type_mosaic_ver .w-gallery-item:nth-child(9n+7) {
grid-row: span 4;
} @media (max-width: 1024px) {
.w-gallery.type_masonry .w-gallery-item {
width: calc( 100% / var(--tablets-columns, 2) );
}
.w-gallery.type_mosaic_hor .w-gallery-list {
grid-template-columns: repeat( 2, 1fr );
}
.w-gallery.type_mosaic_hor .w-gallery-item {
grid-column: span 1 !important;
grid-row: span 1 !important;
height: 35vw;
}
}
@media (max-width: 600px) {
.w-gallery:not([style*="--columns:1"]) .w-gallery-list {
grid-template-columns: repeat( 2, 1fr );
}
.w-gallery-item {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.w-gallery.type_masonry .w-gallery-item {
width: calc( 100% / var(--mobiles-columns, 1) );
}
.w-gallery.type_mosaic_hor .w-gallery-list {
grid-template-columns: 100%;
}
.w-gallery.type_mosaic_hor .w-gallery-item {
height: 60vw;
}
}