/* The homepage Instagram grid, carved by scripts/instagram-grid.mjs.
 *
 * DO NOT EDIT. Every declaration below is a @emotion `styled` template
 * literal out of the Behold/feedspring component's own source, carried in
 * the sourcemaps of YGyygippzltYFiKliEM3CN9BBoRnO5DcLjkvfL4Lsvg.CWU8IjIm.mjs,
 * with this site's settings substituted into the component's own
 * interpolation slots:
 *
 *   grid     columns 3, gap 16px, 6 items
 *   XF0_abkJZ   columns 2, gap 9px, 6 items, at (max-width: 809.98px)
 *   card     height 320px, radius 7px, overlay rgba(8, 8, 11, 0.4)
 *   glyph    icon, 22px, rgb(255, 255, 255)
 *   feed     inst_KJxhZFvrDZrgeOBbT6ddh
 *
 * OWNER-ORDERED DIVERGENCE FROM LIVE - the desktop COLUMN COUNT only.
 * The chunk mounts 4 columns / 8 items and live renders that;
 * this ships 3 columns x the export's own 2 rows = 6 slots,
 * which is exactly what the Behold feed serves, so no cell is left empty.
 * Gated as a divergence by verify/instagram.mjs; see that file and
 * scripts/instagram-grid.mjs for the reasoning.
 */

.ig-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: 24px;

  font-family: "Inter", sans-serif, sans-serif;
}

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 16px;
  column-gap: 16px;
}

.ig-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: 4px;

  background: rgba(8, 8, 11, 0.4);
  opacity: 0;

  text-decoration: none;
  font-weight: 600;
  line-height: 32px;
  font-size: 18px;
  color: rgb(255, 255, 255);

  transition: opacity 0.4s;
}

.ig-image {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.4s;
}

.ig-card {
  position: relative;

  display: flex;
  border-radius: 7px;
  overflow: hidden;

    height: 320px;
}

.ig-card:hover .ig-overlay {
      opacity: 1;
  }

.ig-card:hover .ig-image {
      transform: scale(1.1);
  }

@media (max-width: 809.98px) {
  .ig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 9px;
    column-gap: 9px;
  }
  .ig-card:nth-child(n + 7) { display: none; }
}