:root {
--fg-colors-blue:  rgba(60, 70, 240, 1);
--fg-colors-white: rgba(255, 255, 255, 1);
}
.fotogrids-collection {
list-style: none;
font-size: 12px;
}
.fotogrids-collection:focus {
outline: none;
}
.fg-item-hidden {
visibility: hidden;
}
.fotogrids-collection .fg-item {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
min-width: 0;
cursor: var(--fg-hover-cursor, default);
} .fotogrids-collection .fg-item > a {
display: inherit;
flex-direction: inherit;
gap: inherit;
flex: inherit;
cursor: var(--fg-hover-cursor-link, pointer);
min-width: 0;
max-height: 100%;
text-decoration: none;
} .fotogrids-collection a:focus,
.fotogrids-collection button:focus,
.fotogrids-collection [tabindex]:focus {
outline: none;
}
.fotogrids-collection .fg-item a:focus-visible {
outline: 2px solid var(--fg-colors-blue);
outline-offset: 2px;
}
.fotogrids-collection .fg-item-media {
display: block;
width: 100%;
border-radius: var(--fg-radius, 0);
overflow: hidden;
box-sizing: border-box;
line-height: 0;
}
.fotogrids-collection .fg-item-media picture,
.fotogrids-collection .fg-item-media img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
} .fotogrids-collection .fg-item-media .fg-video {
position: relative;
display: block;
width: 100%;
cursor: pointer;
}
.fotogrids-collection .fg-item-media .fg-video-poster {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.fotogrids-collection .fg-item-media .fg-video-poster--placeholder {
aspect-ratio: var(--fg-item-aspect-ratio, 16 / 9);
background-color: #1d2327;
background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 70%);
}
.fotogrids-collection .fg-item-media .fg-video-badge {
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 56px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
pointer-events: none;
transition: background 0.15s ease;
z-index: 1;
}
.fotogrids-collection .fg-item-media .fg-video-badge::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent #fff;
}
.fotogrids-collection .fg-item-media .fg-video:hover .fg-video-badge {
background: rgba(0, 0, 0, 0.75);
} .fotogrids-collection:where(
[data-fg-layout="grid"],
[data-fg-layout="single-item"],
[data-fg-layout="image-viewer"]
) .fg-item-media {
aspect-ratio: var(--fg-item-aspect-ratio, 4 / 3);
} .fotogrids-collection:where(
[data-fg-layout="grid"],
[data-fg-layout="single-item"],
[data-fg-layout="image-viewer"],
[data-fg-layout="featured-item"]
) .fg-item-media picture,
.fotogrids-collection:where(
[data-fg-layout="grid"],
[data-fg-layout="single-item"],
[data-fg-layout="image-viewer"],
[data-fg-layout="featured-item"]
) .fg-item-media img {
width: 100%;
height: 100%;
object-fit: var(--fg-item-fit, cover);
}
.fotogrids-collection:where(
[data-fg-layout="grid"],
[data-fg-layout="single-item"],
[data-fg-layout="image-viewer"],
[data-fg-layout="featured-item"]
) .fg-item-media .fg-video,
.fotogrids-collection:where(
[data-fg-layout="grid"],
[data-fg-layout="single-item"],
[data-fg-layout="image-viewer"],
[data-fg-layout="featured-item"]
) .fg-item-media .fg-video-poster {
width: 100%;
height: 100%;
object-fit: var(--fg-item-fit, cover);
} .fotogrids-collection[data-fg-layout="single-item"][data-fg-natural-ratio="1"] .fg-item-media {
aspect-ratio: auto;
}
.fotogrids-collection[data-fg-layout="single-item"][data-fg-natural-ratio="1"] .fg-item-media picture,
.fotogrids-collection[data-fg-layout="single-item"][data-fg-natural-ratio="1"] .fg-item-media img {
height: auto;
object-fit: initial;
} .fotogrids-collection[data-fg-border] .fg-item-media {
border-width: var(--fg-border-w);
border-color: var(--fg-border-color);
border-style: var(--fg-border-style);
} .fotogrids-collection[data-fg-spacing] {
margin: var(--fg-margin, 0);
padding: var(--fg-padding, 0);
box-sizing: border-box;
} .fotogrids-collection[data-fg-filter] .fg-item-media img {
filter: var(--fg-thumb-filter-regular) var(--fg-hover-filter, );
transition: filter 0.25s ease;
}
.fotogrids-collection[data-fg-filter] .fg-item:hover .fg-item-media img {
filter: var(--fg-thumb-filter-hover) var(--fg-hover-filter-hover, var(--fg-hover-filter, ));
}