# Section Spacing Guide

## Standard Section Spacing Classes

Use this uniform spacing pattern for all page sections to maintain consistency across breakpoints:

```
py-8 md:py-12 lg:py-16 xl:py-20 2xl:py-24
```

## Breakpoint Values

| Breakpoint          | Class       | Pixels | Rem  |
| ------------------- | ----------- | ------ | ---- |
| Mobile (default)    | `py-8`      | 32px   | 2rem |
| Tablet (md: 768px+) | `md:py-12`  | 48px   | 3rem |
| Large (lg: 1024px+) | `lg:py-16`  | 64px   | 4rem |
| XL (xl: 1280px+)    | `xl:py-20`  | 80px   | 5rem |
| 2XL (2xl: 1536px+)  | `2xl:py-24` | 96px   | 6rem |

## Usage Example

```tsx
const MySection = () => {
  return (
    <section className="py-8 md:py-12 lg:py-16 xl:py-20 2xl:py-24">
      {/* Section content */}
    </section>
  );
};
```

## Applied Sections (Property Details Page)

- `ProjectFeatures`
- `VideoShowcase`
- `AmenitiesSection`
- `MasonryGallery` (portfolioGallery)
- `PropertyLocationMap`

## Notes

- This spacing applies to **vertical padding (py)** on section containers
- Internal element spacing within sections may vary based on design requirements
- Additional classes (like `container`, `mx-auto`, `relative`, etc.) can be combined as needed