#parks-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.map {
  width: 100%;
  height: max(400px, 50vh);
  margin-left: auto;
  margin-right: auto;
}

p.popup {
  font-size: 0.8rem;
}

h3.popup {
  font-size: 0.8rem;
}


@media (min-width: 360px) {

}

/* Upper-range phones in portrait (480px - 575.98px) */
@media (min-width: 480px) {

  #parks-map {
    width: 90%;
  }

}

/* --- SM: 576px to 767.98px --- */
@media (min-width: 576px) {

  #parks-map {
    width: 80%;
  }

}

/* --- MD: 768px to 991.98px --- */
@media (min-width: 768px) {

  p.popup {
    font-size: 1rem; /* normal size */
  }

  h3.popup {
    font-size: 1.75rem; /* normal size */
  }

  #parks-map {
    width: 80%;
  }

}

/* --- LG: 992px to 1199.98px --- */
@media (min-width: 992px) {
}

/* --- Styles for Tablets (Landscape) & Desktops --- */
@media (min-width: 1024px) {
}

@media (min-width: 1200px) {
  
  #parks-map {
    width: 70%;
  }

}

/* --- XXL: 1400px and up --- */
@media (min-width: 1400px) {
}

@media (min-width: 2100px) {
}

/* --- FOR PRINT --- */
@media print {
  body {
      background-color: #fff;
      color: #000;
      font-size: 12pt;
  }
  .container {
      box-shadow: none;
      border: 1px solid #ccc;
  }
  /* Hide elements not relevant for printing */
  nav, footer, .no-print {
      display: none;
  }
}