.fotogrids-collection .fg-item {
gap: var(--fg-caption-gap);
}
.fotogrids-collection .fg-item-media {
align-self: var(--fg-caption-media-align);
}
.fotogrids-collection .fg-caption {
margin: 0;
text-align: var(--fg-caption-align);
} .fotogrids-collection[data-fg-caption='top'] .fg-caption,
.fotogrids-collection[data-fg-caption='bottom'] .fg-caption {
padding: var(--fg-caption-padding, 0);
box-sizing: border-box;
} .fotogrids-collection .fg-caption-content {
display: block;
} .fotogrids-collection[data-fg-caption-show='hide_on_hover'] .fg-caption,
.fotogrids-collection[data-fg-caption-show='show_on_hover'] .fg-caption {
transition-property: opacity;
transition-duration: 250ms;
transition-timing-function: ease;
}
.fotogrids-collection[data-fg-caption-show='show_on_hover'] .fg-caption {
opacity: 0;
}
.fotogrids-collection[data-fg-caption-show='show_on_hover']
.fg-item:hover
.fg-caption {
opacity: 1;
}
.fotogrids-collection[data-fg-caption-show='hide_on_hover']
.fg-item:hover
.fg-caption {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.fotogrids-collection[data-fg-caption-show='hide_on_hover'] .fg-caption,
.fotogrids-collection[data-fg-caption-show='show_on_hover'] .fg-caption {
transition: none;
}
}
.fotogrids-collection[data-fg-caption='top'] .fg-item {
align-self: flex-end;
}
.fotogrids-collection[data-fg-caption='top'] .fg-caption {
order: -1;
}  .fotogrids-collection[data-fg-caption='overlay'] .fg-caption {
position: absolute;
inset: 0;
pointer-events: none;
}
.fotogrids-collection[data-fg-caption='overlay'] .fg-caption-bg,
.fotogrids-collection[data-fg-caption='overlay'] .fg-caption-content {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.fotogrids-collection[data-fg-caption='overlay'] .fg-caption-bg {
border-radius: var(--fg-radius);
background: var(--fg-caption-overlay-bg);
transition: background-color 220ms ease;
}
.fotogrids-collection[data-fg-caption='overlay'] .fg-item:hover .fg-caption-bg {
background: var(
--fg-caption-overlay-bg-hover,
var(--fg-caption-overlay-bg, rgba(0, 0, 0, 0.5))
);
}
.fotogrids-collection[data-fg-caption='overlay'] .fg-caption-content {
display: flex;
flex-direction: column;
justify-content: var(--fg-caption-overlay-align);
padding: var(--fg-caption-overlay-padding, 1rem);
color: var(--fg-caption-title-color);
}
.fotogrids-collection .fg-caption-title {
display: block;
font-family: var(--fg-caption-title-font-family);
font-weight: var(--fg-caption-title-font-weight);
font-style: var(--fg-caption-title-font-style);
font-size: var(--fg-caption-title-font-size);
line-height: var(--fg-caption-title-line-height, normal);
letter-spacing: var(--fg-caption-title-letter-spacing, normal);
word-spacing: var(--fg-caption-title-word-spacing, normal);
color: var(--fg-caption-title-color);
} .fotogrids-collection .fg-caption-title + .fg-caption-description {
margin-top: var(--fg-caption-title-desc-gap, 8px);
}
.fotogrids-collection .fg-caption-description {
display: block;
font-family: var(--fg-caption-desc-font-family);
font-weight: var(--fg-caption-desc-font-weight);
font-style: var(--fg-caption-desc-font-style);
font-size: var(--fg-caption-desc-font-size);
line-height: var(--fg-caption-desc-line-height, normal);
letter-spacing: var(--fg-caption-desc-letter-spacing, normal);
word-spacing: var(--fg-caption-desc-word-spacing, normal);
color: var(--fg-caption-desc-color);
} @supports (-webkit-line-clamp: 1) {
.fotogrids-collection .fg-caption-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--fg-caption-title-lines);
overflow: hidden;
}
.fotogrids-collection .fg-caption-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--fg-caption-desc-lines);
overflow: hidden;
}
}