# Container Utilities

Container utilities provide consistent layout margins across different screen sizes based on the Gaia Design System grid values.

## Overview

The container system follows a mobile-first approach with responsive margins that align with your grid system:

<table>
  <thead>
    <tr>
      <th>Breakpoint</th>
      <th>Screen Size</th>
      <th>Margin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XS</td>
      <td>0-839px</td>
      <td>16px</td>
    </tr>
    <tr>
      <td>S</td>
      <td>840-1439px</td>
      <td>24px</td>
    </tr>
    <tr>
      <td>M</td>
      <td>1440-1919px</td>
      <td>32px</td>
    </tr>
    <tr>
      <td>L</td>
      <td>1920-2559px</td>
      <td>40px</td>
    </tr>
  </tbody>
</table>

## Usage

### Responsive Container

Use `ga-container` for a responsive container that automatically adjusts margins based on screen size:

```html
<div class="ga-container">
  <h1>Your content here</h1>
</div>
```

## Integration with Components

These container utilities are designed to work seamlessly with other Gaia components:

```html
<div class="ga-container">
  <button class="ga-button ga-button--primary">Primary Button</button>
  <p class="ga-text-body">Text content</p>
</div>
```