/* ===== Wrapper van de grid: ruimte tussen kolommen/rijen */
.view.view-card .views-view-grid .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* ruimte horizontaal & verticaal */
}

/* ===== Elke kolom (= 1 item in de grid) */
.view.view-card .views-view-grid .views-col {
  flex: 1 1 calc(25% - 20px); /* 4 kolommen op desktop */
  box-sizing: border-box;
}

/* ===== Card-styling binnen de kolom */
.view.view-card .views-view-grid .views-col > * {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover */
.view.view-card .views-view-grid .views-col > *:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* Afbeeldingen */
.view.view-card .views-view-grid .views-col > * img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  margin-bottom: 15px; /* ruimte onder de foto */
}

/* ===== Responsive breakpoints ===== */
@media (max-width: 991px) {
  .view.view-card .views-view-grid .views-col {
    flex: 1 1 calc(50% - 20px); /* 2 kolommen op tablet */
  }
}

@media (max-width: 575px) {
  .view.view-card .views-view-grid .views-col {
    flex: 1 1 100%; /* 1 kolom op mobiel */
  }
}

/* Zorg dat elke rij flex is met ruimte ertussen */
.view.view-card .views-view-grid .views-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px; /* compenseert padding */
}

/* Elke kolom met padding = ruimte */
.view.view-card .views-view-grid .views-col {
  padding: 10px;
  flex: 1 1 25%; /* 4 kolommen */
  box-sizing: border-box;
}

/* Responsief */
@media (max-width: 991px) {
  .view.view-card .views-view-grid .views-col {
    flex: 1 1 50%; /* 2 kolommen */
  }
}
@media (max-width: 575px) {
  .view.view-card .views-view-grid .views-col {
    flex: 1 1 100%; /* 1 kolom */
  }
}