/* Location grid using <div> and <a> */
.location-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 20px auto !important;
  text-align: center !important;
}

.location-links a {
  flex: 1 1 calc(20% - 12px) !important; /* 5 columns desktop */
  min-width: 180px !important;
  display: block !important;
  text-align: center !important;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  color: #222;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 10px;
  border-radius: 10px;
  transition: all 0.3s ease;
  word-wrap: break-word;
  white-space: normal;
}

/* Multiple gradient colors */
.location-links a:nth-child(2n) { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.location-links a:nth-child(3n) { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); }
.location-links a:nth-child(4n) { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
.location-links a:nth-child(5n) { background: linear-gradient(135deg, #84fab0, #8fd3f4); }

.location-links a:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* Responsive design */
@media (max-width: 1024px) {
  .location-links a { flex: 1 1 calc(33.33% - 12px) !important; } /* 3 columns */
}
@media (max-width: 768px) {
  .location-links a { flex: 1 1 calc(50% - 12px) !important; } /* 2 columns */
}
@media (max-width: 480px) {
  .location-links a { flex: 1 1 100% !important; } /* 1 column */
}