.tig-feed {
display: grid;
gap: 6px;
width: 100%;
} .tig-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tig-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tig-cols-4 { grid-template-columns: repeat(4, 1fr); }
.tig-cols-5 { grid-template-columns: repeat(5, 1fr); }
.tig-cols-6 { grid-template-columns: repeat(6, 1fr); }
.tig-cols-7 { grid-template-columns: repeat(7, 1fr); }
.tig-cols-8 { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 991px) {
.tig-cols-5,
.tig-cols-6,
.tig-cols-7,
.tig-cols-8 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
.tig-feed { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
.tig-feed { grid-template-columns: repeat(2, 1fr) !important; }
} .tig-item {
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
background: #f0f0f0;
}
.tig-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
} .tig-feed .tig-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.tig-item:hover img {
transform: scale(1.06);
} .tig-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px;
opacity: 0;
transition: opacity 0.3s ease;
color: #fff;
}
.tig-item:hover .tig-overlay {
opacity: 1;
} .tig-play-icon {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1; pointer-events: none;
}
.tig-video .tig-play-icon {
opacity: 1;
} .tig-caption {
font-size: 13px;
line-height: 1.4;
text-align: center;
margin: 0;
padding: 8px;
} .tig-empty {
text-align: center;
padding: 40px;
color: #888;
}