:root {
  --gallery-thumb-height-sm: 6rem;
  --gallery-thumb-height-lg: 4rem;
  --gallery-thumb-width-xs: 25%;
  --gallery-thumb-width-sm: 20%;
  --gallery-thumb-width-md: 12.5%;
  --gallery-thumb-width-lg: 10%;
  --primary-color: #004d99;
  --error-color: #dc3545;
  --text-color: #333;
  --bg-light: #f8f9fa;
  --spacing-unit: 1rem;
  --border-radius: 0.25rem;
  --transition-speed: 0.2s;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gallery-image {
  width: 100%;
  height: 4rem; /* Default height, adjust as per your design */
  object-fit: cover;
  display: block;
  border-radius: var(--bs-border-radius); /* If using Bootstrap's border-radius */
  transition: transform var(--transition-speed);
}

.gallery-image:hover {
  transform: scale(1.05);
}

.gallery-thumb {
  width: var(--gallery-thumb-width-xs);
  padding: 0.25rem; /* Corresponds to g-1 spacing if using Bootstrap's grid directly */
  float: left;
  box-sizing: border-box;
}

@media (min-width: 576px) {
  .gallery-thumb {
    width: 33.333%; /* 3 columns */
  }
  .gallery-image {
    height: 7rem;
  }
}

@media (min-width: 768px) {
  .gallery-image {
    height: var(--gallery-thumb-height-lg);
  }
  .gallery-thumb {
    width: var(--gallery-thumb-width-md);
  }
}

@media (min-width: 992px) {
  .gallery-thumb {
    width: 20%; /* 5 columns */
  }
  .gallery-image {
    height: 5rem;
  }
}

@media (min-width: 1200px) {
  .gallery-thumb {
    width: 16.666%; /* 6 columns */
  }
  .gallery-image {
    height: 4.5rem;
  }
}

.gallery-header {
  margin-bottom: var(--spacing-unit);
  padding: var(--spacing-unit);
  background: var(--bg-light);
  border-radius: 0.25rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-unit);
  padding: var(--spacing-unit);
}

.loading,
.error-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacing-unit) * 2);
  background: var(--bg-light);
  border-radius: 0.25rem;
}

.error-message {
  color: var(--error-color);
}

.location {
  color: var(--text-color);
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

.gallery-link {
  display: block;
  text-decoration: none;
}

/* Style for the "No images available" message */
.no-images {
  color: #6c757d; /* Example color */
}