
.mig-feed__debug {
  margin: 0 0 .65rem;
  padding: .4rem .55rem;
  border: 1px dashed #aaa;
  border-radius: 4px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .75rem;
  line-height: 1.35;
  opacity: .78;
}

.MultiInstagramFeed {
  --mig-columns: 4;
  --mig-tablet-columns: 3;
  --mig-mobile-columns: 2;
  --mig-gap: 8px;
  --mig-radius: 0px;
  --mig-ratio: 1 / 1;
  --mig-fit: cover;
  width: 100%;
}

.mig-feed__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1rem; }
.mig-feed__username { color:inherit; font-weight:700; text-decoration:none; }
.mig-feed__follow,
.mig-feed__load-more { appearance:none; border:1px solid currentColor; background:transparent; color:inherit; border-radius:999px; padding:.55rem 1rem; font:inherit; cursor:pointer; text-decoration:none; }
.mig-feed__grid { display:grid; grid-template-columns:repeat(var(--mig-columns),minmax(0,1fr)); gap:var(--mig-gap); }
.mig-feed__item { min-width:0; }
.mig-feed__media,
.mig-feed__skeleton { position:relative; aspect-ratio:var(--mig-ratio); overflow:hidden; border-radius:var(--mig-radius); background:#eee; }
.mig-feed__image { display:block; width:100%; height:100%; object-fit:var(--mig-fit); transition:transform 180ms ease,filter 180ms ease,opacity 180ms ease; }
.mig-hover--zoom .mig-feed__media:hover .mig-feed__image { transform:scale(1.04); }
.mig-hover--fade .mig-feed__media:hover .mig-feed__image { opacity:.78; }
.mig-hover--none .mig-feed__image { transition:none; }


* { /*border: thin dashed black; padding:10px;*/ }

.mig-feed__click-target { 
					position:absolute; 
					inset:0; 
					z-index:1; 
					width:100%; 
					height:100%; 
					border:0; 
					background:transparent; 
					cursor:pointer; 

}
.mig-feed__badge { position:absolute; top:.55rem; right:.55rem; z-index:3; display:grid; place-items:center; min-width:1.7rem; min-height:1.7rem; padding:.2rem .35rem; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; font-size:.8rem; line-height:1; pointer-events:none; }
.mig-feed__meta { padding:.65rem .1rem 0; }
.mig-feed__caption { font-size:.9rem; line-height:1.4; }
.mig-feed__date { display:block; margin-top:.35rem; font-size:.75rem; opacity:.7; }
.mig-feed__carousel-controls { position:absolute; inset:0; z-index:4; pointer-events:none; }
.mig-feed__carousel-button { position:absolute; top:50%; translate:0 -50%; pointer-events:auto; border:0; width:2.2rem; height:2.2rem; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; }
.mig-feed__carousel-button--prev { left:.5rem; }
.mig-feed__carousel-button--next { right:.5rem; }
.mig-feed__carousel-dots { position:absolute; left:50%; bottom:.55rem; translate:-50% 0; display:flex; gap:.3rem; }
.mig-feed__carousel-dot { width:.42rem; height:.42rem; border-radius:999px; background:rgba(255,255,255,.55); }
.mig-feed__carousel-dot.is-active { background:#fff; }
.mig-feed__load-more-wrap { display:flex; justify-content:center; margin-top:1rem; }
.mig-feed__message { margin:0; padding:1rem; text-align:center; }
.mig-feed__message--error { opacity:.75; }
.mig-feed__skeleton { background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.11) 37%,rgba(0,0,0,.06) 63%); background-size:400% 100%; animation:mig-shimmer 1.25s ease infinite; }
@keyframes mig-shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

body.mig-lightbox-open { overflow:hidden; }
.mig-lightbox { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; padding:2rem; background:rgba(0,0,0,.88); }
.mig-lightbox__panel { position:relative; width:min(100%,1000px); max-height:calc(100vh - 4rem); overflow:auto; background:#fff; color:#111; border-radius:10px; }
.mig-lightbox__close { position:absolute; top:.5rem; right:.65rem; z-index:5; border:0; background:rgba(0,0,0,.65); color:#fff; width:2.4rem; height:2.4rem; border-radius:999px; font-size:1.7rem; line-height:1; cursor:pointer; }
.mig-lightbox__stage { position:relative; display:grid; place-items:center; min-height:300px; background:#111; }
.mig-lightbox__image { display:block; max-width:100%; max-height:72vh; margin:auto; object-fit:contain; }
.mig-lightbox__nav { position:absolute; top:50%; translate:0 -50%; border:0; width:3rem; height:3rem; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.mig-lightbox__nav--prev { left:.75rem; }
.mig-lightbox__nav--next { right:.75rem; }
.mig-lightbox__dots { display:flex; justify-content:center; gap:.45rem; padding:.75rem 1rem 0; }
.mig-lightbox__dot { width:.6rem; height:.6rem; padding:0; border:0; border-radius:999px; background:#bbb; cursor:pointer; }
.mig-lightbox__dot.is-active { background:#222; }
.mig-lightbox__info { padding:1rem 1.25rem 1.25rem; }
.mig-lightbox__caption { white-space:pre-line; line-height:1.45; }
.mig-lightbox__instagram-link { display:inline-block; margin-top:.75rem; }

@media (max-width:900px) {
  .MultiInstagramFeed .mig-feed__grid { grid-template-columns:repeat(var(--mig-tablet-columns),minmax(0,1fr)); }
}
@media (max-width:600px) {
  .MultiInstagramFeed .mig-feed__grid { grid-template-columns:repeat(var(--mig-mobile-columns),minmax(0,1fr)); }
  .mig-lightbox { padding:.75rem; }
  .mig-lightbox__panel { max-height:calc(100vh - 1.5rem); }
}
@media (prefers-reduced-motion:reduce) {
  .mig-feed__image,
  .mig-feed__skeleton { transition:none; animation:none; }
}





/* ==========================================================
   HORIZONTAL FEED SLIDER
   ========================================================== */

.mig-feed__slider-shell {
    position: relative;
    width: 100%;
}


/* ACTUAL SCROLLING TRACK */

.mig-feed__slider {
    display: flex;

    gap: var(--mig-gap);

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding-bottom: 3px;
}


/* HIDE CHROME/EDGE/SAFARI SCROLLBAR */

.mig-feed__slider::-webkit-scrollbar {
    display: none;
}


/* INDIVIDUAL POST WIDTH */

.mig-feed__slider > .mig-feed__item {

    flex:

        0
        0
        var(--mig-slider-card-desktop);

    scroll-snap-align: start;

    min-width: 0;
}


/* DISABLE USER SWIPE IF REQUESTED */

.mig-feed__slider--no-swipe {
    overflow-x: hidden;

    touch-action: pan-y;
}


/* ==========================================================
   FEED PREVIOUS / NEXT BUTTONS
   ========================================================== */

.mig-feed__slider-arrow {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 20;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.85);

    border-radius: 50%;

    background:
        rgba(0,0,0,.68);

    color: #fff;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.25);
}


.mig-feed__slider-arrow--prev {
    left: 10px;
}


.mig-feed__slider-arrow--next {
    right: 10px;
}


.mig-feed__slider-arrow:disabled {

    opacity: .25;

    cursor: default;

}


/* ==========================================================
   FEED SLIDER DOTS
   ========================================================== */

.mig-feed__slider-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 12px;
}


.mig-feed__slider-dot {

    appearance: none;

    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        #bbb;

    cursor: pointer;
}


.mig-feed__slider-dot.is-active {

    background:
        #222;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .mig-feed__slider > .mig-feed__item {

        flex-basis:
            var(--mig-slider-card-tablet);

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .mig-feed__slider > .mig-feed__item {

        flex-basis:
            var(--mig-slider-card-mobile);

    }


    .mig-feed__slider-arrow {

        width: 40px;
        height: 40px;

        font-size: 28px;

    }

}



