/* 1. De Layer herstellen (niet meer te breed) */
.hero-render-wrapper, .hero-flex-container {
  max-width: 1320px !important; /* Lijn uit met je logo */
  margin: 0 auto !important;
  padding: 0 15px;
  display: flex;
  gap: 30px; /* Ruimte tussen Hero en Meest Gelezen */
}

/* 2. De Hero afbeelding (660x400) */
.hero-main-image img {
  width: 660px !important;
  height: 400px !important;
  object-fit: cover;
  display: block;
}

/* 3. De Gele balk met Zwarte titel */
.hero-title-overlay {
  background-color: #fccb05;
  width: 660px; /* Gelijk aan de afbeelding */
  padding: 15px 0;
  text-align: center;
}

.hero-title-text, .hero-title-text a {
  color: #000000 !important; /* Maakt de titel zwart ipv paars */
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: bold;
}
/* Zorg dat de hero-sectie niet breder wordt dan je logo/content */
.hero-render-wrapper {
  max-width: 660px; /* De breedte van je nieuwe afbeeldingstijl */
  margin: 0;        /* Houdt hem links uitgelijnd zoals in je screenshot */
}

/* De gele balk volgt nu de breedte van de wrapper (660px) */
.hero-title-overlay {
  background-color: #fccb05;
  padding: 10px;
  width: 100%; 
  box-sizing: border-box;
}

/* Maak de tekst zwart ipv blauw/paars */
.hero-title-text a {
  color: #000 !important;
  text-decoration: none;
}
/* De wrapper begrenzen zodat de tekst niet uitloopt */
.hero-render-wrapper {
  max-width: 660px !important;
  margin: 0;
  padding-bottom: 20px;
}

/* De afbeelding exact op jouw maat */
.hero-main-image img {
  width: 660px !important;
  height: 400px !important;
  object-fit: cover;
  display: block;
}

/* De titel: Zwart, strak en zonder geel */
.hero-title-text {
  margin-top: 15px;
  font-size: 1.4rem;
  line-height: 1.2;
}

.hero-title-text a {
  color: #000000 !important; /* Maakt de paarse/blauwe link zwart */
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: bold;
}
/* De basis: zorg dat de overlay binnen dit kader blijft */
.hero-render-wrapper {
  position: relative; /* Cruciaal voor de overlay */
  max-width: 660px !important; /* Jouw gewenste breedte */
  width: 660px !important;
  margin: 0;
  overflow: hidden; /* Zorgt dat de overlay niet buiten de foto steekt */
}

.hero-main-image img {
  width: 660px !important;
  height: 400px !important;
  object-fit: cover;
  display: block;
}

/* De Overlay styling */
.hero-title-overlay {
  position: absolute;
  bottom: 0;         /* Plak hem aan de onderkant van de foto */
  left: 0;
  width: 100%;       /* Matcht de 660px van de foto */
  background: rgba(252, 203, 5, 0.9); /* Goudgeel, maar licht doorzichtig */
  padding: 15px 20px;
  box-sizing: border-box;
}

/* De tekst in de overlay */
.hero-title-text, 
.hero-title-text a {
  margin: 0;
  color: #000000 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  display: block;
}
/* De basis: zorg dat de overlay binnen dit kader blijft */
.hero-render-wrapper {
  position: relative; 
  max-width: 660px !important; 
  width: 660px !important;
  margin: 0;
  overflow: hidden; 
}

/* De afbeelding op jouw maat */
.hero-main-image img {
  width: 660px !important;
  height: 400px !important;
  object-fit: cover;
  display: block;
}

/* De Overlay styling: Plak hem onderaan de foto */
.hero-title-overlay {
  position: absolute;
  bottom: 0;         
  left: 0;
  width: 100%;       /* Matcht de 660px van de foto */
  background-color: #fccb05 !important; /* Goudgeel */
  padding: 15px 20px;
  box-sizing: border-box;
}

/* De titel: Zwart en strak */
.hero-title-text, 
.hero-title-text a {
  margin: 0;
  color: #000000 !important; /* Geen paars meer! */
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  display: block;
}
.hero-render-wrapper {
  position: relative !important;
  width: 660px !important;
  height: 400px !important;
  margin: 0 !important;
}

.hero-main-image img {
  width: 660px !important;
  height: 400px !important;
  object-fit: cover !important;
}

.hero-title-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #fccb05 !important;
  padding: 15px !important;
  box-sizing: border-box !important;
}

.hero-title-text a {
  color: #000000 !important;
  text-decoration: none !important;
}