.integrations-ig-wrap {
    padding: 0;
    width: 100%;
    margin: 0;
    position: relative;
}

/* The gap belongs to the hero-then-feed pairing, not to the feed on its own.
   Any org without a core-home-hero logo — most of them — has the feed as the first
   thing inside .global-app-content, where a top margin stacked on that element's
   padding and made the gap above the grid twice the one beside it. Same token
   as the padding, so the two cannot drift apart again. The admin reconnect
   notice on home.html is a .integrations-ig-wrap in this same slot, so the selector reaches
   it as well; only the feed case is measured by a test. */
.core-home-hero + .integrations-ig-wrap {
    margin-top: var(--page-gutter);
}

/* The shared inline ring (components/loading.css), shown only while a page is on
   its way. It stays in the markup rather than being put in and taken out, so it
   cannot shift the grid as it comes and goes — and it is hidden here rather than
   with the `hidden` attribute, which the panel's own display would win against. */
.integrations-ig-wrap .global-loading-panel {
    display: none;
}

.integrations-ig-wrap--loading .global-loading-panel {
    display: flex;
}

/* The columns of the masonry, and the only place their number is written down —
   the script reads the tracks back rather than keeping its own copy of 5/3/2. */
.integrations-ig-grid {
    --ig-gap: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ig-gap);
    align-items: start;
}

/* One column of it. Posts keep their own heights, so the columns end ragged at
   the bottom. min-width lets a track be narrower than the photo inside it: an
   Instagram photo is about 1080px wide and would otherwise set the track's
   floor and push the row off the page. */
.integrations-ig-column {
    display: flex;
    flex-direction: column;
    gap: var(--ig-gap);
    min-width: 0;
}

@media (max-width: 900px) {
    .integrations-ig-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .integrations-ig-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Chrome (fill, radius, elevated shadow) comes from .global-card--elevated; the
   tile only adds the corner clip that crops each photo to the rounded card. */
.integrations-ig-card {
    overflow: hidden;
}

/* No ratio of our own. Every post is shown at the shape it was posted in —
   square square, reels tall, landscape wide — so nothing is ever cut off. The
   height comes from the photo: give the image the full width of its column and
   let it set its own height, and the tile is whatever shape the post is. */
.integrations-ig-imgwrap {
    position: relative;
    overflow: hidden;
    display: block;
}

.integrations-ig-imgwrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.integrations-ig-imgwrap:hover img {
    transform: scale(1.03);
}

.integrations-ig-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-xsm);
    border-radius: 6px;
}

.integrations-ig-status {
    margin-top: var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-lg);
    color: rgba(0, 0, 0, 0.55);
}

.integrations-ig-status--error {
    color: var(--color-error);
}

.integrations-ig-sentinel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
}