/* Algemene reset voor padding en margin */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0; /* Zorg voor een achtergrondkleur als fallback */
}

/* De wrapper voor de twee afbeeldingen die naast elkaar moeten staan */
.image-container-wrapper {
  display: flex; /* Flexbox voor het naast elkaar plaatsen van de afbeeldingen */
  justify-content: space-between; /* Zorgt ervoor dat de afbeeldingen goed verdeeld worden */
  gap: 0; /* Geen gap tussen de afbeeldingen */
  flex-wrap: wrap; /* Zorgt ervoor dat bij kleinere schermen de afbeeldingen onder elkaar komen */
  width: 100%;
  height: 100vh; /* Zorg ervoor dat de wrapper altijd de hoogte van het scherm heeft */
}

/* De container voor elke afbeelding */
.image-container, .image-container2 {
  position: relative;
  width: 50%; /* Zorg ervoor dat de afbeeldingen naast elkaar passen zonder tussenruimte */
  display: flex;
  justify-content: center; /* Horizontaal centreren van de afbeelding */
  align-items: center; /* Verticaal centreren van de afbeelding */
  overflow: auto; /* Zorg ervoor dat de afbeelding scrollbaar is als deze groter is dan de container */
}

/* De afbeelding zelf */
.image-container img, .image-container2 img {
  width: 100%; /* Vul de breedte van de container */
  height: auto; /* Zorgt ervoor dat de afbeelding zijn aspect ratio behoudt */
  object-fit: contain; /* Zorg ervoor dat de afbeelding volledig zichtbaar is zonder bijsnijden */
  object-position: center top; /* Zorg ervoor dat de afbeelding gecentreerd wordt zonder bovenkant af te snijden */
  filter: grayscale(100%); /* Zwart-wit maken van de afbeelding */
  transition: filter 0.3s ease; /* Voeg een overgang toe voor het hover effect */
}

/* Zwart-wit afbeelding verandert naar kleur bij hover */
.image-container img:hover, .image-container2 img:hover {
  filter: grayscale(0%); /* Zet de afbeelding in kleur bij hover */
}

/* De tekst in de container die over de afbeelding moet komen */
.fotografie, .illustratie {
  position: absolute;
  top: 50%; /* Verticaal gecentreerd */
  left: 50%; /* Horizontaal gecentreerd */
  transform: translate(-50%, -50%); /* Zorgt ervoor dat de tekst echt in het midden komt */
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Zodat de tekst beter leesbaar is */
}

.fotografie a, .illustratie a {
  color: white;
  text-decoration: none;
}

.fotografie a:hover, .illustratie a:hover {
  color: #f0f0f0; /* Lichte hover-effect voor de tekst */
}

/* Responsieve stijlen voor kleinere schermen */
@media (max-width: 768px) {
  .image-container-wrapper {
    flex-direction: column; /* Zet de afbeeldingen onder elkaar op kleinere schermen */
    gap: 0; /* Zorg ervoor dat er geen ruimte is tussen de afbeeldingen */
  }

  .image-container, .image-container2 {
    width: 100%; /* Maak de containers op kleinere schermen breder */
    height: 100vh; /* Zorg ervoor dat de containers de volledige hoogte van het scherm vullen */
  }

  /* Tekst grootte aanpassen */
  .fotografie, .illustratie {
    font-size: 1.2rem; /* Kleinere tekst op kleinere schermen */
  }
}

@media (max-width: 480px) {
  .fotografie, .illustratie {
    font-size: 1rem; /* Nog kleinere tekst voor telefoons */
  }
}