@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
891 lines (551 loc) • 20.9 kB
CSS
/**
* Spacing Utilities System
*
* A comprehensive spacing system providing consistent gap, margin, and padding
* utilities for modern web layouts. This system uses a harmonious spacing scale
* based on design tokens and provides utilities for all spacing needs.
*
* @layer layout.spacing
* @version 2.0
* @author Design System Team
*
* FEATURES:
* - Consistent spacing scale based on design tokens
* - Gap utilities for CSS Grid and Flexbox layouts
* - Margin utilities for external spacing
* - Padding utilities for internal spacing
* - Directional spacing controls (top, right, bottom, left)
* - Axis-based spacing (horizontal, vertical)
* - Negative margin utilities for overlapping layouts
* - Auto margin utilities for centering
* - Responsive variants available via responsive-utilities.css
*
* SPACING SCALE:
* Based on a harmonious scale with consistent ratios:
* - 0: 0 (no spacing)
* - 1: 0.25rem (4px)
* - 2: 0.5rem (8px)
* - 3: 0.75rem (12px)
* - 4: 1rem (16px) - Base unit
* - 5: 1.25rem (20px)
* - 6: 1.5rem (24px)
* - 8: 2rem (32px)
* - 10: 2.5rem (40px)
* - 12: 3rem (48px)
* - 16: 4rem (64px)
* - 20: 5rem (80px)
* - 24: 6rem (96px)
* - 32: 8rem (128px)
*
* GAP UTILITIES:
* For CSS Grid and Flexbox layouts:
* - .gap-{size}: Gap in all directions
* - .gap-x-{size}: Horizontal gap (column-gap)
* - .gap-y-{size}: Vertical gap (row-gap)
*
* MARGIN UTILITIES:
* For external spacing around elements:
* - .m-{size}: Margin in all directions
* - .mx-{size}: Horizontal margins (left + right)
* - .my-{size}: Vertical margins (top + bottom)
* - .mt-{size}: Margin top
* - .mr-{size}: Margin right
* - .mb-{size}: Margin bottom
* - .ml-{size}: Margin left
* - .m-auto: Auto margin (centering)
* - .mx-auto: Auto horizontal margins (horizontal centering)
* - .my-auto: Auto vertical margins (vertical centering)
*
* NEGATIVE MARGINS:
* For overlapping layouts and adjustments:
* - .-m-{size}: Negative margin in all directions
* - .-mx-{size}: Negative horizontal margins
* - .-my-{size}: Negative vertical margins
* - .-mt-{size}: Negative margin top
* - .-mr-{size}: Negative margin right
* - .-mb-{size}: Negative margin bottom
* - .-ml-{size}: Negative margin left
*
* PADDING UTILITIES:
* For internal spacing within elements:
* - .p-{size}: Padding in all directions
* - .px-{size}: Horizontal padding (left + right)
* - .py-{size}: Vertical padding (top + bottom)
* - .pt-{size}: Padding top
* - .pr-{size}: Padding right
* - .pb-{size}: Padding bottom
* - .pl-{size}: Padding left
*
* USAGE EXAMPLES:
*
* Grid Layout with Gap:
* <div class="grid grid-cols-3 gap-6">
* <!-- 24px gap between grid items -->
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
* </div>
*
* Flex Layout with Different Gaps:
* <div class="flex gap-x-4 gap-y-2">
* <!-- 16px horizontal gap, 8px vertical gap -->
* <div>Item 1</div>
* <div>Item 2</div>
* </div>
*
* Card with Padding:
* <div class="bg-white p-6 rounded-lg">
* <!-- 24px padding on all sides -->
* <h2 class="mb-4">Card Title</h2>
* <p>Card content with bottom margin</p>
* </div>
*
* Centered Container:
* <div class="max-w-4xl mx-auto px-4">
* <!-- Horizontally centered with side padding -->
* <h1>Page Title</h1>
* </div>
*
* Overlapping Elements:
* <div class="relative">
* <img src="background.jpg" alt="Background">
* <div class="absolute -mt-8 bg-white p-4">
* <!-- Overlaps background by 32px -->
* <h2>Overlapping Content</h2>
* </div>
* </div>
*
* Responsive Spacing:
* <div class="p-4 md:p-6 lg:p-8">
* <!-- 16px on mobile, 24px on tablet, 32px on desktop -->
* <h1>Responsive Padding</h1>
* </div>
*
* BROWSER SUPPORT:
* - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+
* - Margin/Padding: All browsers
* - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
* - Flexbox Gap: Chrome 84+, Firefox 63+, Safari 14.1+
* - Grid Gap: All browsers with CSS Grid support
*
* PERFORMANCE NOTES:
* - Gap properties are more performant than margin-based spacing
* - CSS custom properties enable efficient theming
* - Utility classes reduce CSS specificity conflicts
* - Consistent spacing scale improves visual rhythm
* - Negative margins should be used sparingly for performance
*
* ACCESSIBILITY:
* - Adequate spacing improves readability and usability
* - Consistent spacing creates predictable layouts
* - Sufficient padding improves touch target sizes
* - Proper spacing helps with focus indicators
* - Consider spacing for users with motor impairments
*
* INTEGRATION:
* - Works seamlessly with layout/grid-system.css for grid gaps
* - Compatible with layout/flex-layouts.css for flex gaps
* - Enhanced by layout/responsive-utilities.css for responsive spacing
* - Supports layout/containers.css for container padding
* - Integrates with design token system for consistent theming
*
* DESIGN TOKENS:
* Spacing utilities are based on design tokens:
* :root {
* --spacing-0: 0;
* --spacing-1: 0.25rem;
* --spacing-2: 0.5rem;
* --spacing-3: 0.75rem;
* --spacing-4: 1rem;
* --spacing-5: 1.25rem;
* --spacing-6: 1.5rem;
* --spacing-8: 2rem;
* --spacing-10: 2.5rem;
* --spacing-12: 3rem;
* --spacing-16: 4rem;
* --spacing-20: 5rem;
* --spacing-24: 6rem;
* --spacing-32: 8rem;
* }
*
* BEST PRACTICES:
* - Use gap utilities for layout spacing (grid/flex)
* - Use margin utilities for component spacing
* - Use padding utilities for internal component spacing
* - Prefer consistent spacing scale over arbitrary values
* - Use responsive spacing for better mobile experience
* - Avoid excessive negative margins that can break layouts
* - Test spacing across different screen sizes
* - Consider spacing in relation to typography scale
*
* DEBUGGING:
* Add temporary backgrounds to debug spacing:
* .debug-spacing * {
* background: rgba(255, 0, 0, 0.1) !important;
* outline: 1px solid red !important;
* }
*
* MIGRATION:
* From older spacing systems:
* - .margin-small → .m-2
* - .padding-large → .p-8
* - .no-margin → .m-0
* - .center → .mx-auto
*/
@layer layout.spacing {
/* ================= GAP UTILITIES ================= */
/* Gap für Grid- und Flex-Layouts */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }
.gap-24 { gap: 6rem; }
.gap-32 { gap: 8rem; }
/* Horizontale Gaps (column-gap) */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-x-16 { column-gap: 4rem; }
.gap-x-20 { column-gap: 5rem; }
.gap-x-24 { column-gap: 6rem; }
.gap-x-32 { column-gap: 8rem; }
/* Vertikale Gaps (row-gap) */
.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; }
.gap-y-16 { row-gap: 4rem; }
.gap-y-20 { row-gap: 5rem; }
.gap-y-24 { row-gap: 6rem; }
.gap-y-32 { row-gap: 8rem; }
/* ================= MARGIN UTILITIES ================= */
/* Margin in alle Richtungen */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-12 { margin: 3rem; }
.m-16 { margin: 4rem; }
.m-20 { margin: 5rem; }
.m-24 { margin: 6rem; }
.m-32 { margin: 8rem; }
.m-auto { margin: auto; }
/* Horizontale Margins */
.mx-0 { margin-left: 0%; margin-right: 0%; }
.mx-1 { margin-left: 0%.25rem; margin-right: 0%.25rem; }
.mx-2 { margin-left: 0%.5rem; margin-right: 0%.5rem; }
.mx-3 { margin-left: 0%.75rem; margin-right: 0%.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-5 { margin-left: 1%.25rem; margin-right: 1%.25rem; }
.mx-6 { margin-left: 1%.5rem; margin-right: 1%.5rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.mx-10 { margin-left: 2%.5rem; margin-right: 2%.5rem; }
.mx-12 { margin-left: 3rem; margin-right: 3rem; }
.mx-16 { margin-left: 4rem; margin-right: 4rem; }
.mx-20 { margin-left: 5rem; margin-right: 5rem; }
.mx-24 { margin-left: 6rem; margin-right: 6rem; }
.mx-32 { margin-left: 8rem; margin-right: 8rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Vertikale Margins */
.my-0 { margin-bottom: 0%; margin-top: 0%; }
.my-1 { margin-bottom: 0%.25rem; margin-top: 0%.25rem; }
.my-2 { margin-bottom: 0%.5rem; margin-top: 0%.5rem; }
.my-3 { margin-bottom: 0%.75rem; margin-top: 0%.75rem; }
.my-4 { margin-bottom: 1rem; margin-top: 1rem; }
.my-5 { margin-bottom: 1%.25rem; margin-top: 1%.25rem; }
.my-6 { margin-bottom: 1%.5rem; margin-top: 1%.5rem; }
.my-8 { margin-bottom: 2rem; margin-top: 2rem; }
.my-10 { margin-bottom: 2%.5rem; margin-top: 2%.5rem; }
.my-12 { margin-bottom: 3rem; margin-top: 3rem; }
.my-16 { margin-bottom: 4rem; margin-top: 4rem; }
.my-20 { margin-bottom: 5rem; margin-top: 5rem; }
.my-24 { margin-bottom: 6rem; margin-top: 6rem; }
.my-32 { margin-bottom: 8rem; margin-top: 8rem; }
.my-auto { margin-bottom: auto; margin-top: auto; }
/* Einzelne Margin-Richtungen */
.mt-0 { margin-top: 0%; }
.mt-1 { margin-top: 0%.25rem; }
.mt-2 { margin-top: 0%.5rem; }
.mt-3 { margin-top: 0%.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1%.25rem; }
.mt-6 { margin-top: 1%.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2%.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mt-24 { margin-top: 6rem; }
.mt-32 { margin-top: 8rem; }
.mt-auto { margin-top: auto; }
.mr-0 { margin-right: 0%; }
.mr-1 { margin-right: 0%.25rem; }
.mr-2 { margin-right: 0%.5rem; }
.mr-3 { margin-right: 0%.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1%.25rem; }
.mr-6 { margin-right: 1%.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2%.5rem; }
.mr-12 { margin-right: 3rem; }
.mr-16 { margin-right: 4rem; }
.mr-20 { margin-right: 5rem; }
.mr-24 { margin-right: 6rem; }
.mr-32 { margin-right: 8rem; }
.mr-auto { margin-right: auto; }
.mb-0 { margin-bottom: 0%; }
.mb-1 { margin-bottom: 0%.25rem; }
.mb-2 { margin-bottom: 0%.5rem; }
.mb-3 { margin-bottom: 0%.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1%.25rem; }
.mb-6 { margin-bottom: 1%.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2%.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-32 { margin-bottom: 8rem; }
.mb-auto { margin-bottom: auto; }
.ml-0 { margin-left: 0%; }
.ml-1 { margin-left: 0%.25rem; }
.ml-2 { margin-left: 0%.5rem; }
.ml-3 { margin-left: 0%.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1%.25rem; }
.ml-6 { margin-left: 1%.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-10 { margin-left: 2%.5rem; }
.ml-12 { margin-left: 3rem; }
.ml-16 { margin-left: 4rem; }
.ml-20 { margin-left: 5rem; }
.ml-24 { margin-left: 6rem; }
.ml-32 { margin-left: 8rem; }
.ml-auto { margin-left: auto; }
/* ================= NEGATIVE MARGINS ================= */
/* Negative Margins für Überlappungen */
.-m-1 { margin: -0.25rem; }
.-m-2 { margin: -0.5rem; }
.-m-3 { margin: -0.75rem; }
.-m-4 { margin: -1rem; }
.-m-5 { margin: -1.25rem; }
.-m-6 { margin: -1.5rem; }
.-m-8 { margin: -2rem; }
.-m-10 { margin: -2.5rem; }
.-m-12 { margin: -3rem; }
.-m-16 { margin: -4rem; }
.-m-20 { margin: -5rem; }
.-m-24 { margin: -6rem; }
.-m-32 { margin: -8rem; }
/* Negative horizontale Margins */
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.-mx-3 { margin-left: -0.75rem; margin-right: -0.75rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
.-mx-5 { margin-left: -1.25rem; margin-right: -1.25rem; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.-mx-8 { margin-left: -2rem; margin-right: -2rem; }
.-mx-10 { margin-left: -2.5rem; margin-right: -2.5rem; }
.-mx-12 { margin-left: -3rem; margin-right: -3rem; }
.-mx-16 { margin-left: -4rem; margin-right: -4rem; }
.-mx-20 { margin-left: -5rem; margin-right: -5rem; }
.-mx-24 { margin-left: -6rem; margin-right: -6rem; }
.-mx-32 { margin-left: -8rem; margin-right: -8rem; }
/* Negative vertikale Margins */
.-my-1 { margin-bottom: -0.25rem; margin-top: -0.25rem; }
.-my-2 { margin-bottom: -0.5rem; margin-top: -0.5rem; }
.-my-3 { margin-bottom: -0.75rem; margin-top: -0.75rem; }
.-my-4 { margin-bottom: -1rem; margin-top: -1rem; }
.-my-5 { margin-bottom: -1.25rem; margin-top: -1.25rem; }
.-my-6 { margin-bottom: -1.5rem; margin-top: -1.5rem; }
.-my-8 { margin-bottom: -2rem; margin-top: -2rem; }
.-my-10 { margin-bottom: -2.5rem; margin-top: -2.5rem; }
.-my-12 { margin-bottom: -3rem; margin-top: -3rem; }
.-my-16 { margin-bottom: -4rem; margin-top: -4rem; }
.-my-20 { margin-bottom: -5rem; margin-top: -5rem; }
.-my-24 { margin-bottom: -6rem; margin-top: -6rem; }
.-my-32 { margin-bottom: -8rem; margin-top: -8rem; }
/* Einzelne negative Margins */
.-mt-1 { margin-top: -0.25rem; }
.-mt-2 { margin-top: -0.5rem; }
.-mt-3 { margin-top: -0.75rem; }
.-mt-4 { margin-top: -1rem; }
.-mt-5 { margin-top: -1.25rem; }
.-mt-6 { margin-top: -1.5rem; }
.-mt-8 { margin-top: -2rem; }
.-mt-10 { margin-top: -2.5rem; }
.-mt-12 { margin-top: -3rem; }
.-mt-16 { margin-top: -4rem; }
.-mt-20 { margin-top: -5rem; }
.-mt-24 { margin-top: -6rem; }
.-mt-32 { margin-top: -8rem; }
.-mr-1 { margin-right: -0.25rem; }
.-mr-2 { margin-right: -0.5rem; }
.-mr-3 { margin-right: -0.75rem; }
.-mr-4 { margin-right: -1rem; }
.-mr-5 { margin-right: -1.25rem; }
.-mr-6 { margin-right: -1.5rem; }
.-mr-8 { margin-right: -2rem; }
.-mr-10 { margin-right: -2.5rem; }
.-mr-12 { margin-right: -3rem; }
.-mr-16 { margin-right: -4rem; }
.-mr-20 { margin-right: -5rem; }
.-mr-24 { margin-right: -6rem; }
.-mr-32 { margin-right: -8rem; }
.-mb-1 { margin-bottom: -0.25rem; }
.-mb-2 { margin-bottom: -0.5rem; }
.-mb-3 { margin-bottom: -0.75rem; }
.-mb-4 { margin-bottom: -1rem; }
.-mb-5 { margin-bottom: -1.25rem; }
.-mb-6 { margin-bottom: -1.5rem; }
.-mb-8 { margin-bottom: -2rem; }
.-mb-10 { margin-bottom: -2.5rem; }
.-mb-12 { margin-bottom: -3rem; }
.-mb-16 { margin-bottom: -4rem; }
.-mb-20 { margin-bottom: -5rem; }
.-mb-24 { margin-bottom: -6rem; }
.-mb-32 { margin-bottom: -8rem; }
.-ml-1 { margin-left: -0.25rem; }
.-ml-2 { margin-left: -0.5rem; }
.-ml-3 { margin-left: -0.75rem; }
.-ml-4 { margin-left: -1rem; }
.-ml-5 { margin-left: -1.25rem; }
.-ml-6 { margin-left: -1.5rem; }
.-ml-8 { margin-left: -2rem; }
.-ml-10 { margin-left: -2.5rem; }
.-ml-12 { margin-left: -3rem; }
.-ml-16 { margin-left: -4rem; }
.-ml-20 { margin-left: -5rem; }
.-ml-24 { margin-left: -6rem; }
.-ml-32 { margin-left: -8rem; }
/* ================= PADDING UTILITIES ================= */
/* Padding in alle Richtungen */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }
.p-20 { padding: 5rem; }
.p-24 { padding: 6rem; }
.p-32 { padding: 8rem; }
/* Horizontales Padding */
.px-0 { padding-left: 0%; padding-right: 0%; }
.px-1 { padding-left: 0%.25rem; padding-right: 0%.25rem; }
.px-2 { padding-left: 0%.5rem; padding-right: 0%.5rem; }
.px-3 { padding-left: 0%.75rem; padding-right: 0%.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1%.25rem; padding-right: 1%.25rem; }
.px-6 { padding-left: 1%.5rem; padding-right: 1%.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2%.5rem; padding-right: 2%.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }
.px-24 { padding-left: 6rem; padding-right: 6rem; }
.px-32 { padding-left: 8rem; padding-right: 8rem; }
/* Vertikales Padding */
.py-0 { padding-bottom: 0%; padding-top: 0%; }
.py-1 { padding-bottom: 0%.25rem; padding-top: 0%.25rem; }
.py-2 { padding-bottom: 0%.5rem; padding-top: 0%.5rem; }
.py-3 { padding-bottom: 0%.75rem; padding-top: 0%.75rem; }
.py-4 { padding-bottom: 1rem; padding-top: 1rem; }
.py-5 { padding-bottom: 1%.25rem; padding-top: 1%.25rem; }
.py-6 { padding-bottom: 1%.5rem; padding-top: 1%.5rem; }
.py-8 { padding-bottom: 2rem; padding-top: 2rem; }
.py-10 { padding-bottom: 2%.5rem; padding-top: 2%.5rem; }
.py-12 { padding-bottom: 3rem; padding-top: 3rem; }
.py-16 { padding-bottom: 4rem; padding-top: 4rem; }
.py-20 { padding-bottom: 5rem; padding-top: 5rem; }
.py-24 { padding-bottom: 6rem; padding-top: 6rem; }
.py-32 { padding-bottom: 8rem; padding-top: 8rem; }
/* Einzelne Padding-Richtungen */
.pt-0 { padding-top: 0%; }
.pt-1 { padding-top: 0%.25rem; }
.pt-2 { padding-top: 0%.5rem; }
.pt-3 { padding-top: 0%.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1%.25rem; }
.pt-6 { padding-top: 1%.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2%.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }
.pr-0 { padding-right: 0%; }
.pr-1 { padding-right: 0%.25rem; }
.pr-2 { padding-right: 0%.5rem; }
.pr-3 { padding-right: 0%.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1%.25rem; }
.pr-6 { padding-right: 1%.5rem; }
.pr-8 { padding-right: 2rem; }
.pr-10 { padding-right: 2%.5rem; }
.pr-12 { padding-right: 3rem; }
.pr-16 { padding-right: 4rem; }
.pr-20 { padding-right: 5rem; }
.pr-24 { padding-right: 6rem; }
.pr-32 { padding-right: 8rem; }
.pb-0 { padding-bottom: 0%; }
.pb-1 { padding-bottom: 0%.25rem; }
.pb-2 { padding-bottom: 0%.5rem; }
.pb-3 { padding-bottom: 0%.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1%.25rem; }
.pb-6 { padding-bottom: 1%.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2%.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-32 { padding-bottom: 8rem; }
.pl-0 { padding-left: 0%; }
.pl-1 { padding-left: 0%.25rem; }
.pl-2 { padding-left: 0%.5rem; }
.pl-3 { padding-left: 0%.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1%.25rem; }
.pl-6 { padding-left: 1%.5rem; }
.pl-8 { padding-left: 2rem; }
.pl-10 { padding-left: 2%.5rem; }
.pl-12 { padding-left: 3rem; }
.pl-16 { padding-left: 4rem; }
.pl-20 { padding-left: 5rem; }
.pl-24 { padding-left: 6rem; }
.pl-32 { padding-left: 8rem; }
}