/* ==============================================================
GRID LAYOUT
============================================================== */

.grid-block{
  padding:60px var(--space-3);
}

.grid-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}


/* ==============================================================
GRID CARD
============================================================== */

.grid-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}


/* image */

.grid-card img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
}


/* donkere overlay (achter tekst) */

.grid-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1;
}


/* ==============================================================
TEKST / LINK OVERLAY
============================================================== */

.grid-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  padding:20px;

  color:#fff;
  font-size:1.4rem;
  font-weight:700;
  text-decoration:none;

  z-index:2; /* 🔥 zorgt dat tekst boven overlay ligt */
  text-shadow:0 2px 8px rgba(0,0,0,.6); /* 🔥 mega belangrijk */
  transition:0.3s ease;
}


/* hover effect */

.grid-card:hover .grid-overlay{
  background:rgba(0,0,0,.45);
}


/* ==============================================================
RESPONSIVE
============================================================== */

@media(max-width:800px){
  .grid-cards{
    grid-template-columns:1fr;
  }

  .grid-card img{
    height:260px;
  }
}