@layer base {
  .container {
    margin-bottom: var(--spacing-8);
  }

  .title {
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-4) 0;
    color: var(--foreground);
  }

  .categories {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
  }

  .categoryButton {
    transition: all var(--animation-duration-fast) ease;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .categories {
      gap: var(--spacing-1);
    }
    
    .categoryButton {
      font-size: 0.8125rem;
      padding: var(--spacing-1) var(--spacing-2);
    }
  }
}