.igfeed,
.igfeed * {
box-sizing: border-box;
}
.igfeed {
width: 100%;
--igfeed-btn-color: rgba(193, 93, 53, 0.55);
--igfeed-btn-text-color: #ffffff;
--igfeed-cols-desktop: 6;
--igfeed-cols-tablet: 4;
--igfeed-cols-mobile: 2;
}
.igfeed__grid {
display: grid;
grid-template-columns: repeat(var(--igfeed-cols-desktop), 1fr);
gap: 0;
width: 100%;
}
@media (max-width: 900px) {
.igfeed__grid {
grid-template-columns: repeat(var(--igfeed-cols-tablet), 1fr);
}
}
@media (max-width: 540px) {
.igfeed__grid {
grid-template-columns: repeat(var(--igfeed-cols-mobile), 1fr);
}
}
.igfeed__card {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #e0e0e0;
}
.igfeed__card a {
display: block;
width: 100%;
height: 100%;
}
.igfeed__card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.igfeed__card:hover img {
transform: scale(1.04);
}
.igfeed__overlay {
position: absolute;
inset: 0;
background: var(--igfeed-btn-color);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.igfeed__card:hover .igfeed__overlay {
opacity: 1;
}
.igfeed__overlay svg {
width: 36px;
height: 36px;
fill: #fff;
}
.igfeed__card--loading {
background: linear-gradient(90deg, #e0e0e0 25%, #ececec 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: igfeed-shimmer 1.4s infinite;
}
@keyframes igfeed-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.igfeed__card--error {
background: #fce4ec;
}
.igfeed__cta {
width: 100%;
display: flex;
justify-content: center;
padding: 14px 0 0;
}
.igfeed .igfeed__btn,
.igfeed .igfeed__btn:visited {
background: var(--igfeed-btn-color);
color: var(--igfeed-btn-text-color) !important;
text-decoration: none !important;
font-weight: 700;
font-size: 0.92rem;
line-height: 1;
letter-spacing: 0.02em;
padding: 12px 20px;
border-radius: 10px;
transition: background-color 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: min(360px, calc(100% - 24px));
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.igfeed .igfeed__btn:hover,
.igfeed .igfeed__btn:focus,
.igfeed .igfeed__btn:active {
color: var(--igfeed-btn-text-color) !important;
text-decoration: none !important;
transition: .2s;
}
.igfeed .igfeed__btn:hover { filter: brightness(1.05);
}