:root {
  --brand-color: #210b56;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
}

/* Typography & Branding */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-color);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--brand-color);
  font-weight: 500;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--brand-color);
  font-weight: 700;
}

/* Grid Layout */
.grid {
  width: 100%;
  column-count: 4;
  column-gap: 1rem;
}

.grid-item {
  margin-bottom: 1rem;
  width: 100%;
  break-inside: avoid;
  display: inline-block; /* Prevents column breaking inside */
}

.grid-item img {
  width: 100%;
  height: auto;
  cursor: pointer;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: block;
  transition: transform 0.2s ease;
}

.grid-item img:hover {
    transform: scale(1.02);
}

@media (max-width: 991px) {
  .grid {
    column-count: 3;
  }
}

@media (max-width: 767px) {
  .grid {
    column-count: 2;
  }
}