/* Generic map container */
.ds-map { width: 100%; }

/* Aspect ratios (used by other maps, not this one on desktop) */
.ds-map--ratio-4-3 { aspect-ratio: 4 / 3; }
.ds-map--ratio-square { aspect-ratio: 1 / 1; }

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .ds-map--ratio-4-3 { position: relative; height: 0; padding-bottom: 75%; }
  .ds-map--ratio-square { position: relative; height: 0; padding-bottom: 100%; }
  .ds-map--ratio-4-3 > div,
  .ds-map--ratio-square > div {
    position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important;
  }
}

/* Locaties map: 500px on desktop/tablet */
.ds-map--locaties {
  height: 500px;             /* fixed height for >=641px */
  min-height: 300px;         /* safety */
  aspect-ratio: auto;        /* explicitly disable any inherited ratio */
}

/* Mobile (<=640px): switch to 1:1 ratio */
@media (max-width: 640px) {
  .ds-map--locaties {
    height: auto !important; /* let aspect-ratio drive height */
    aspect-ratio: 1 / 1;
  }

  /* Fallback for old browsers */
  @supports not (aspect-ratio: 1 / 1) {
    .ds-map--locaties {
      height: 0 !important;
      padding-bottom: 100%;
      position: relative;
    }
    .ds-map--locaties > div {
      position: absolute !important;
      top: 0; left: 0;
      width: 100% !important;
      height: 100% !important;
    }
  }
}