.gallery-item {
--item-height: 240px;
position: relative;
margin: 0;
display: block;
width: 100%;
height: var(--item-height);
text-decoration: none;
color: var(--background-color);
background-color: var(--background-secondary-color);
overflow: hidden;
cursor: pointer;
}
.gallery-item.aspect-ratio {
height: inherit;
}
.gallery-item:hover {
color: var(--background-color);
}
.gallery-item:hover .gallery-item-caption {
opacity: 1;
visibility: visible;
}
.gallery-item:hover .gallery-item-caption::after {
height: 100%;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s;
}
.gallery-item-caption {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0.625rem 1rem;
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
line-height: var(--heading-line-height);
text-align: center;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
font-size: 1.125rem;
transition: all 0.3s;
}
.gallery-item-caption::after {
content: "";
position: absolute;
left: 0;
top: 50%;
height: 3.125rem;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
transform: translateY(-50%);
transition: all 0.3s;
}
.gallery-item-caption span {
position: relative;
display: block;
z-index: 2;
}
.pswp__img {
object-fit: cover;
}
.lg-outer .lg-thumb {
margin: 0 auto -0.625rem;
}
@media (min-width: 768px) {
.gallery-grid-item-height-x2 .gallery-item {
height: calc(var(--item-height) * 2 + var(--bs-gutter-x));
}
.gallery-container.g-0 .gallery-grid-item-height-x2 .gallery-item {
height: calc(var(--item-height) * 2);
}
}
@media (min-width: 992px) {
.gallery-masonry-container-2 .gallery-item {
--item-height: 320px;
}
.gallery-masonry-container-3 .gallery-item {
--item-height: 265px;
}
}
@media (min-width: 1200px) {
.gallery-masonry-container-2 .gallery-item {
--item-height: 360px;
}
.gallery-masonry-container-2 .gallery-item-caption {
font-size: 1.25rem;
}
.gallery-masonry-container-2 .gallery-grid-item-height-x2 .gallery-item-caption {
font-size: 1.375rem;
}
.gallery-masonry-container-3 .gallery-item {
--item-height: 300px;
}
.gallery-masonry-container-3 .gallery-grid-item-height-x2 .gallery-item-caption {
font-size: 1.375rem;
}
}
@media (min-width: 1400px) {
.gallery-masonry-container-3 .gallery-item-caption {
font-size: 1.25rem;
}
}