@layer sections{
  [ui-section=instagram-feed]{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-24);
  }
  [ui-section=instagram-feed] .ig-head{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-4);
  }
  [ui-section=instagram-feed] .ig-head[data-align=center]{ align-items:center; text-align:center; }
  [ui-section=instagram-feed] .ig-head[data-align=start]{ align-items:flex-start; text-align:start; }
  [ui-section=instagram-feed] .ig-heading{
    margin:0;
    font:var(--font-heading-xl);
  }
  [ui-section=instagram-feed] .ig-handle{
    color:inherit;
    font-weight:500;
    text-decoration:none;
    opacity:0.8;
    direction:ltr;
  }
  [ui-section=instagram-feed] .ig-grid{
    display:grid;
    grid-template-columns:repeat(var(--ig-columns-desktop, 6), minmax(0, 1fr));
    gap:var(--spacing-12);
    margin:0;
    padding:0;
    list-style:none;
  }
  [ui-section=instagram-feed] .ig-item{
    position:relative;
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:12px;
    background-color:color-mix(in srgb, var(--fg-color) 8%, var(--bg-color));
  }
  [ui-section=instagram-feed] .ig-skeleton{
    animation:ig-pulse 1.4s ease-in-out infinite;
  }
  @keyframes ig-pulse{ 50%{ opacity:0.55; } }
  [ui-section=instagram-feed] .ig-item a{
    display:block;
    width:100%;
    height:100%;
  }
  [ui-section=instagram-feed] .ig-item img{
    display:block;
    width:100%;
    height:100%;
    -o-object-fit:cover;
       object-fit:cover;
    transition:transform 300ms ease;
  }
  [ui-section=instagram-feed] .ig-item a:hover img,
  [ui-section=instagram-feed] .ig-item a:focus-visible img{
    transform:scale(1.04);
  }
  [ui-section=instagram-feed] .ig-badge{
    position:absolute;
    inset-block-start:8px;
    inset-inline-end:8px;
    display:flex;
    color:#fff;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    pointer-events:none;
  }
  [ui-section=instagram-feed] .ig-actions{
    display:flex;
    justify-content:center;
  }
  [ui-section=instagram-feed] .ig-button{
    display:inline-flex;
    align-items:center;
    gap:var(--spacing-8);
    min-height:48px;
    padding:0 var(--spacing-24);
    border:1.5px solid var(--fg-color);
    border-radius:var(--radius-button, 8px);
    color:var(--fg-color);
    font-weight:700;
    text-decoration:none;
  }
  [ui-section=instagram-feed] .ig-button:hover{
    background-color:var(--fg-color);
    color:var(--bg-color);
  }
  [ui-section=instagram-feed][data-state=empty] .ig-grid{
    display:none;
  }
  @media (max-width: 768px){
    [ui-section=instagram-feed] .ig-grid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:var(--spacing-8);
    }
    [ui-section=instagram-feed] .ig-item{
      border-radius:8px;
    }
    [ui-section=instagram-feed] .ig-heading{
      font-size:24px;
      line-height:1.3;
    }
  }
}
