@media (max-width: 1023px) {
  /* 1. Reset de break-out zodat we geen enorme gaten krijgen */
  .hero-grid-wrapper {
    width: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* 2. Maak de regio een eenvoudige container */
  .region-middle-blocks {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    background: transparent !important;
  }

  /* 3. TARGET DE BLOKKEN SPECIFIEK: Geen min-height, maar padding */
  .region-middle-blocks .block,
  .region-middle-blocks .views-row,
  .region-middle-blocks .view-content > div {
    background-color: #feb41a !important;
    height: auto !important; /* Laat de padding de hoogte bepalen */
    min-height: 0 !important; /* Reset de oude instelling */
    padding: 60px 20px !important; /* DIT maakt het vlak groot en luxe */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* 4. Fix voor de tekst en pijltjes */
  .region-middle-blocks .views-field,
  .region-middle-blocks .newsletter-content {
    background: transparent !important;
    text-align: center;
    width: 100%;
    color: #000;
  }
}