Port bootstrap breakpoints to tailwind

Currently using Bootstrap 5.2.2 breakpoints throughout the codebase. Need to configure Tailwind to use identical breakpoints to migrate without regressions.

## Current state
Bootstrap breakpoints:
```
xs: 0px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
```

Tailwind default breakpoints:
```
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
2xl: 1536px
```

Migrate components using Bootstrap responsive classes: `py-md-2, d-lg-flex` etc.

## DoD
- [ ] Tailwind breakpoints match Bootstrap breakpoints exactly
- [ ] Responsive classes can be migrated without visual changes
- [ ] Documentation exists for team on migration pattern
- [ ] No visual regressions in responsive design

**Migration examples**
```
// tailwind.config.js
screens: {
'xs': '0px',
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
'2xl': '1400px'
}

text-sm text-md-lg -> text-sm lg:text-lg
```