.fci {
--fci-cols: 6;
--fci-cols-t: 3;
--fci-cols-m: 2;
--fci-gap: 10px;
--fci-radius: 0px;
--fci-ratio: 1/1;
--fci-overlay: rgba(0, 0, 0, .55);
--fci-text: #fff;
--fci-btn-bg: #000;
--fci-btn-color: #fff;
--fci-align: center;
max-width: var(--fci-max, none);
margin-inline: auto;
}
.fci-title {
text-align: var(--fci-align);
margin: 0 0 calc(var(--fci-gap) + 12px);
}
.fci-grid {
display: grid;
grid-template-columns: repeat(var(--fci-cols), minmax(0, 1fr));
gap: var(--fci-gap);
list-style: none;
margin: 0;
padding: 0;
}
.fci-item {
margin: 0;
padding: 0;
}
.fci-item::before {
display: none;
}
.fci-link {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--fci-ratio);
border-radius: var(--fci-radius);
background: #f2f2f2;
color: var(--fci-text);
text-decoration: none;
}
.fci-link img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease, filter .4s ease;
}
.fci-type-icon {
position: absolute;
top: 8px;
right: 8px;
color: #fff;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
line-height: 0;
z-index: 2;
}
.fci-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: var(--fci-overlay);
color: var(--fci-text);
text-align: center;
opacity: 0;
transition: opacity .3s ease;
z-index: 1;
}
.fci-stats {
display: flex;
gap: 16px;
font-weight: 600;
}
.fci-stat {
display: inline-flex;
align-items: center;
gap: 5px;
}
.fci-caption {
font-size: 13px;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
} .fci-hover-overlay .fci-link:is(:hover, :focus-visible) .fci-overlay,
.fci-hover-overlay-zoom .fci-link:is(:hover, :focus-visible) .fci-overlay {
opacity: 1;
}
.fci-hover-zoom .fci-link:is(:hover, :focus-visible) img,
.fci-hover-overlay-zoom .fci-link:is(:hover, :focus-visible) img {
transform: scale(1.08);
}
.fci-hover-grayscale .fci-link img {
filter: grayscale(1);
}
.fci-hover-grayscale .fci-link:is(:hover, :focus-visible) img {
filter: none;
} .fci-footer {
margin-top: calc(var(--fci-gap) + 16px);
text-align: var(--fci-align);
}
.fci-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--fci-btn-bg);
color: var(--fci-btn-color) !important;
border-radius: var(--fci-btn-radius, 4px);
text-decoration: none !important;
font-weight: 600;
transition: opacity .2s ease;
}
.fci-button:hover {
opacity: .85;
}
@media (max-width: 1024px) {
.fci-grid {
grid-template-columns: repeat(var(--fci-cols-t), minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.fci-grid {
grid-template-columns: repeat(var(--fci-cols-m), minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.fci-link img,
.fci-overlay {
transition: none;
}
}