/* Brands grid layout */
.brands-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 1200px;
}

/* Brand item styling */
.brand-item {
  flex: 0 0 auto;
  min-width: 120px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.brand-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Ensure images are properly contained */
.brand-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.brand-item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* All brands button */
.brand-item.all-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  background: white;
  border: 1px solid #d1d5db;
}

.brand-item.all-brands:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .brands-grid {
    gap: 0.75rem;
  }

  .brand-item {
    min-width: calc(33.333% - 0.5rem);
    height: 70px;
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .brand-item {
    min-width: calc(50% - 0.5rem);
  }
}