.promotie-banner {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end; /* Plaats content onderaan */
  align-items: flex-start;
  background-size: cover;
  background-position: bottom;
  padding: 40px;
  color: var(--white-color);
  text-decoration: none;
  border-radius: 4px;
  min-height: 300px;
  position: relative;
  transition: transform 0.3s ease;
  flex-direction: column;
}

.promotie-banner::before {
  content: "";
  position: absolute;
  inset: 0; /* vult de hele banner */
  background: rgba(0, 0, 0, 0.2); /* zwarte overlay met 40% opacity */
}

.promotie-banner:hover {
  transform: scale(1.01);
  color: var(--white-color);
}

.promotie-banner h3 {
  font-size: var(--h3-font-size);
  margin-bottom: 10px;
  color: var(--white-color);
}

.promotie-banner p {
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  font-family: var(--body-font-family);
  margin-bottom: 10px;
  color: var(--white-color);
}