body[data-project="hetwarenhuis"] {
  background: var(--color-bg);
}

body[data-project="hetwarenhuis"] .project-page {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

body[data-project="hetwarenhuis"] .gallery-section {
  padding: clamp(1rem, 2.5vw, 2rem) var(--page-gutter) clamp(2rem, 5vw, 4rem);
}

body[data-project="hetwarenhuis"] .gallery-track {
  display: block;
  column-count: 2;
  column-gap: clamp(0.85rem, 1.8vw, 1.3rem);
  width: min(112rem, 100%);
  margin-inline: auto;
  padding: 0;
}

body[data-project="hetwarenhuis"] .gallery-card {
  break-inside: avoid;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(0.85rem, 1.8vw, 1.3rem);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

body[data-project="hetwarenhuis"] .gallery-card:hover,
body[data-project="hetwarenhuis"] .gallery-card:focus-visible {
  transform: translateY(-0.12rem);
  box-shadow: none;
  border-color: transparent;
  outline: none;
}

body[data-project="hetwarenhuis"] .gallery-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0;
}



@media (max-width: 960px) {
  body[data-project="hetwarenhuis"] .gallery-track {
    column-count: 2;
  }
}

@media (max-width: 640px) {
  body[data-project="hetwarenhuis"] .project-page {
    padding-bottom: 1.2rem;
  }

  body[data-project="hetwarenhuis"] .gallery-section {
    padding: 0.85rem var(--page-gutter) 1.4rem;
  }

  body[data-project="hetwarenhuis"] .gallery-track {
    column-count: 1;
    column-gap: 0;
    gap: 0.85rem;
  }

  body[data-project="hetwarenhuis"] .gallery-card {
    transform: none;
  }
}