#header-image{
  width:100%;
  min-height:50vh;         /* adjust */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← exactly 2 columns */
  padding-top: 50vh;
  gap:12px;

}
.gallery-item{
  break-inside: avoid;
  display: inline-block; /* wichtig für column-layout */
  width: 100%;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-item:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.gallery-item img{ display:block; width:100%; height:100%; object-fit: cover;}


@media (min-width: 1024px){
  .gallery-grid{
    display:block;
    column-count:3;      /* oder 3/5 je nach Breite */
    column-gap:1rem;
    padding-top:50vh;
  }
  .gallery-item{
    display:inline-block;    /* needed for columns */
    width:100%;
    margin:0 0 1rem;
    break-inside:avoid;
  }
}