.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-automation.png") center/cover no-repeat;
	background-color: #ebe5df;
}

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

.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-grid-landscape-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* drie even brede kolommen */
  gap: 0px;                             /* ruimte tussen blokken */
	margin-top: 0px;
}

.work-grid-special {
  display: grid;
  grid-template-columns: 0.2fr 0.6fr 0.2fr; /* evenwichtige verhouding */
  gap: 0px;
  align-items: stretch;
	aspect-ratio: 30 / 9;
  width: 100%;
	grid-template-areas: "left center right";
	margin-top: 0px;
}

/* grid-area namen koppelen */
.left  { grid-area: left; }
.center { grid-area: center; }
.right { grid-area: right; }

.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-panorama {
  aspect-ratio: 1280 / 240;     /* 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-special,
.work-item-landscape,
.work-item-panorama {
	position: relative;
  overflow: hidden;
	margin: 4px;
  border-radius: 10px;
}

/* afbeelding vult het blok */
.work-item-special img, .work-item-special video,
.work-item-landscape img, .work-item-landscape video,
.work-item-panorama img, .work-item-panorama 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-special::before,
.work-item-landscape::before,
.work-item-panorama::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-special a,
.work-item-landscape a,
.work-item-panorama a {
  position: absolute;
  inset: 0;
  z-index: 1; /* boven pseudo-element voor klikbaarheid */
  display: block;
}

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



/* 📱 Op mobiel onder elkaar */
@media (max-width: 768px) {
	.work-grid-landscape-2, .work-grid-landscape-3 {
    grid-template-columns: 1fr;
  }
	.work-item-panorama {
	  aspect-ratio: 1280 / 480;
	}
	.work-grid-special {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left right"
      "center center";
    aspect-ratio: auto;
  }

  .work-item-special.portrait {
    aspect-ratio: 9 / 16;
  }
  .work-item-special.landscape {
    aspect-ratio: 16 / 9;
  }
}