/* ---------------------------------------------------------------------------
 * home-social — Instagram feed strip (Figma 560:650). Moved out of home.css so
 * the block carries its own stylesheet (see inc/block-assets.php).
 *
 * The block is registered but not currently placed on the live Home page; the
 * stylesheet ships with it so the block is self-contained the day it goes back.
 * ------------------------------------------------------------------------- */

.home-social {
  display: grid;
  grid-template-columns: repeat(5, 441px);
  justify-content: center;
  gap: 3px;
  padding-block: 13px;
  overflow: hidden;
  background: var(--bg, #ffffff);
}

.home-social img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg, 11px);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1399px) {
  .home-social {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .home-social {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .home-social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }
}

/* --- Editor mirrors ------------------------------------------------------ *
 * See blocks/theme/hero/theme-hero.css for why these exist. Inert on the front
 * end; the `crush-block` container is declared only in assets/css/editor.css.
 * ------------------------------------------------------------------------- */

@container crush-block (max-width: 1399px) {
  .home-social {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@container crush-block (max-width: 991px) {
  .home-social {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container crush-block (max-width: 767px) {
  .home-social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container crush-block (max-width: 575px) {
  .home-social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }
}