.block-hero {
	width: 100%;
	height: 160px;
	background:
    linear-gradient(to top, rgba(29, 95, 131, 0) 0%, rgba(29, 95, 131, 0) 100%),
    url("../images/hero-lead.png") center/cover no-repeat;
	background-color: #ebe5df;
}

.work-grid-landscape-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* drie even brede kolommen */
  gap: 0px;                             /* ruimte tussen blokken */
	margin-top: 0px;
}

.work-item-landscape {
  aspect-ratio: 16 / 9;     /* verhouding behouden */
  background: #ebe5df;      /* voorbeeldkleur */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;             /* belangrijk om breken te voorkomen */
  box-sizing: border-box;
}

.work-item-landscape {
	position: relative;
  overflow: hidden;
	margin: 4px;
  border-radius: 10px;
}

/* afbeelding vult het blok */
.work-item-landscape img, .work-item-landscape video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease; /* evt. zoom, kan ook weg */
}

/* pseudo-element voor stroke */
.work-item-landscape::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid #1D5F83;   /* start met 0px */
  border-radius: inherit;
  pointer-events: none;       /* blokkeert geen clicks */
  transition: border-width 0.25s ease;
  z-index: 2;                 /* boven img, onder evt. link */
}

.work-item-landscape a {
  position: absolute;
  inset: 0;
  z-index: 1; /* boven pseudo-element voor klikbaarheid */
  display: block;
}

/* hover effect: stroke van 0 → 5px */
.work-item-landscape:hover::before {
  border-width: 5px;
}


/* 📱 Op mobiel onder elkaar */
@media (max-width: 768px) {
	.work-grid-landscape-2 {
    grid-template-columns: 1fr;
  }
}