/* ==================================================
   HOMEPAGE

   Wordt automatisch geladen op de homepage, omdat de
   header /css/<slug>.css inleest en de slug van de
   webroot 'home' is.

   Hero, dienstenblokken, fotostrook en reviews komen
   ook op andere pagina's voor en staan in global.css.
   Hier alleen wat écht alleen op de homepage staat.
================================================== */


/* ==================================================
   INSTAGRAM

   Een vast raster met de laatste berichten. Elke tegel
   linkt naar het bericht op Instagram.
================================================== */

.instagram__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;
}

.instagram__grid a {
  display: block;

  overflow: hidden;
}

.instagram__grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;

  object-fit: cover;

  transition: transform 0.3s ease;
}

.instagram__grid a:hover img {
  transform: scale(1.04);
}

.instagram__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  font-weight: 700;
}

.instagram__more .icon {
  width: 1.4em;
  height: 1.4em;
}

.instagram__more:hover {
  color: var(--text-muted);
}

@media (max-width: 767px) {

  .instagram__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}