/*! PolyFishCSS-Space.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
*
* The full spacing and sizing utility surface: padding and margin on every
* side, gaps, grid track shorthands, flex sizing and placement.
*
* Depends on: PolyFishCSS-Core.css (the space scale and gap tokens).
* Load order: after Core, with the other utility files at the end.
*
* CONTENTS
* 1. Padding
* 2. Margin
* 3. Gap
* 4. Grid tracks and placement
* 5. Flex sizing
* 6. Responsive spacing
*
* NAMING
* .pf-p-4 padding on all sides
* .pf-px-4 padding inline (left and right, and RTL-correct)
* .pf-py-4 padding block (top and bottom)
* .pf-pt-4 padding top -pr- right -pb- bottom -pl- left
* .pf-m-* the same set for margin, plus -auto
* .pf-md-p-4 from 768px up
*
* The suffix is a step on the space scale, not a pixel value. Retuning
* --pf-space-* retunes every utility with it, which is the difference
* between a scale and a pile of numbers.
*
* ON SIZE
* This file is roughly 700 declarations. That is the cost of a utility
* surface without a compiler to purge it - the trade is no build step, and
* it gzips to a few kilobytes because the strings repeat. If you would
* rather not carry it, do not load it: nothing else depends on this module.
*/
@layer polyfish.core, polyfish.grid, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.fonts, polyfish.compat;
/* ==========================================================================
CASCADE LAYER
==========================================================================
Everything below sits in `polyfish.space`. The layer order is declared in
every module, so it holds no matter which order you link the files in.
Why this matters to you: unlayered CSS beats layered CSS regardless of
specificity. Your own stylesheet overrides any framework rule with a plain
class selector — no `!important`, no specificity arms race, no worrying
about whether Utilities loaded last.
If you want your CSS layered too, name a layer after the framework's:
@layer polyfish, app;
@layer app { .card { background: rebeccapurple; } }
========================================================================== */
@layer polyfish.space {
/* ==========================================================================
#PADDING
========================================================================== */
.pf-p-0 { padding: 0; }
.pf-p-1 { padding: var(--pf-space-1); }
.pf-p-2 { padding: var(--pf-space-2); }
.pf-p-3 { padding: var(--pf-space-3); }
.pf-p-4 { padding: var(--pf-space-4); }
.pf-p-5 { padding: var(--pf-space-5); }
.pf-p-6 { padding: var(--pf-space-6); }
.pf-p-7 { padding: var(--pf-space-7); }
.pf-p-8 { padding: var(--pf-space-8); }
.pf-p-9 { padding: var(--pf-space-9); }
.pf-p-px { padding: 1px; }
.pf-px-0 { padding-inline: 0; }
.pf-px-1 { padding-inline: var(--pf-space-1); }
.pf-px-2 { padding-inline: var(--pf-space-2); }
.pf-px-3 { padding-inline: var(--pf-space-3); }
.pf-px-4 { padding-inline: var(--pf-space-4); }
.pf-px-5 { padding-inline: var(--pf-space-5); }
.pf-px-6 { padding-inline: var(--pf-space-6); }
.pf-px-7 { padding-inline: var(--pf-space-7); }
.pf-px-8 { padding-inline: var(--pf-space-8); }
.pf-px-9 { padding-inline: var(--pf-space-9); }
.pf-px-px { padding-inline: 1px; }
.pf-py-0 { padding-block: 0; }
.pf-py-1 { padding-block: var(--pf-space-1); }
.pf-py-2 { padding-block: var(--pf-space-2); }
.pf-py-3 { padding-block: var(--pf-space-3); }
.pf-py-4 { padding-block: var(--pf-space-4); }
.pf-py-5 { padding-block: var(--pf-space-5); }
.pf-py-6 { padding-block: var(--pf-space-6); }
.pf-py-7 { padding-block: var(--pf-space-7); }
.pf-py-8 { padding-block: var(--pf-space-8); }
.pf-py-9 { padding-block: var(--pf-space-9); }
.pf-py-px { padding-block: 1px; }
.pf-pt-0 { padding-top: 0; }
.pf-pt-1 { padding-top: var(--pf-space-1); }
.pf-pt-2 { padding-top: var(--pf-space-2); }
.pf-pt-3 { padding-top: var(--pf-space-3); }
.pf-pt-4 { padding-top: var(--pf-space-4); }
.pf-pt-5 { padding-top: var(--pf-space-5); }
.pf-pt-6 { padding-top: var(--pf-space-6); }
.pf-pt-7 { padding-top: var(--pf-space-7); }
.pf-pt-8 { padding-top: var(--pf-space-8); }
.pf-pt-9 { padding-top: var(--pf-space-9); }
.pf-pt-px { padding-top: 1px; }
.pf-pe-0 { padding-inline-end: 0; }
.pf-pe-1 { padding-inline-end: var(--pf-space-1); }
.pf-pe-2 { padding-inline-end: var(--pf-space-2); }
.pf-pe-3 { padding-inline-end: var(--pf-space-3); }
.pf-pe-4 { padding-inline-end: var(--pf-space-4); }
.pf-pe-5 { padding-inline-end: var(--pf-space-5); }
.pf-pe-6 { padding-inline-end: var(--pf-space-6); }
.pf-pe-7 { padding-inline-end: var(--pf-space-7); }
.pf-pe-8 { padding-inline-end: var(--pf-space-8); }
.pf-pe-9 { padding-inline-end: var(--pf-space-9); }
.pf-pe-px { padding-inline-end: 1px; }
.pf-pb-0 { padding-bottom: 0; }
.pf-pb-1 { padding-bottom: var(--pf-space-1); }
.pf-pb-2 { padding-bottom: var(--pf-space-2); }
.pf-pb-3 { padding-bottom: var(--pf-space-3); }
.pf-pb-4 { padding-bottom: var(--pf-space-4); }
.pf-pb-5 { padding-bottom: var(--pf-space-5); }
.pf-pb-6 { padding-bottom: var(--pf-space-6); }
.pf-pb-7 { padding-bottom: var(--pf-space-7); }
.pf-pb-8 { padding-bottom: var(--pf-space-8); }
.pf-pb-9 { padding-bottom: var(--pf-space-9); }
.pf-pb-px { padding-bottom: 1px; }
.pf-ps-0 { padding-inline-start: 0; }
.pf-ps-1 { padding-inline-start: var(--pf-space-1); }
.pf-ps-2 { padding-inline-start: var(--pf-space-2); }
.pf-ps-3 { padding-inline-start: var(--pf-space-3); }
.pf-ps-4 { padding-inline-start: var(--pf-space-4); }
.pf-ps-5 { padding-inline-start: var(--pf-space-5); }
.pf-ps-6 { padding-inline-start: var(--pf-space-6); }
.pf-ps-7 { padding-inline-start: var(--pf-space-7); }
.pf-ps-8 { padding-inline-start: var(--pf-space-8); }
.pf-ps-9 { padding-inline-start: var(--pf-space-9); }
.pf-ps-px { padding-inline-start: 1px; }
/* ==========================================================================
#MARGIN
==========================================================================
Negative steps are deliberately absent. A negative margin is almost always
a symptom of a layout fighting its container, and a utility for it makes
that easy to reach for twice. Use gap, or fix the container.
========================================================================== */
.pf-m-0 { margin: 0; }
.pf-m-1 { margin: var(--pf-space-1); }
.pf-m-2 { margin: var(--pf-space-2); }
.pf-m-3 { margin: var(--pf-space-3); }
.pf-m-4 { margin: var(--pf-space-4); }
.pf-m-5 { margin: var(--pf-space-5); }
.pf-m-6 { margin: var(--pf-space-6); }
.pf-m-7 { margin: var(--pf-space-7); }
.pf-m-8 { margin: var(--pf-space-8); }
.pf-m-9 { margin: var(--pf-space-9); }
.pf-m-auto { margin: auto; }
.pf-m-px { margin: 1px; }
.pf-mx-0 { margin-inline: 0; }
.pf-mx-1 { margin-inline: var(--pf-space-1); }
.pf-mx-2 { margin-inline: var(--pf-space-2); }
.pf-mx-3 { margin-inline: var(--pf-space-3); }
.pf-mx-4 { margin-inline: var(--pf-space-4); }
.pf-mx-5 { margin-inline: var(--pf-space-5); }
.pf-mx-6 { margin-inline: var(--pf-space-6); }
.pf-mx-7 { margin-inline: var(--pf-space-7); }
.pf-mx-8 { margin-inline: var(--pf-space-8); }
.pf-mx-9 { margin-inline: var(--pf-space-9); }
.pf-mx-auto { margin-inline: auto; }
.pf-mx-px { margin-inline: 1px; }
.pf-my-0 { margin-block: 0; }
.pf-my-1 { margin-block: var(--pf-space-1); }
.pf-my-2 { margin-block: var(--pf-space-2); }
.pf-my-3 { margin-block: var(--pf-space-3); }
.pf-my-4 { margin-block: var(--pf-space-4); }
.pf-my-5 { margin-block: var(--pf-space-5); }
.pf-my-6 { margin-block: var(--pf-space-6); }
.pf-my-7 { margin-block: var(--pf-space-7); }
.pf-my-8 { margin-block: var(--pf-space-8); }
.pf-my-9 { margin-block: var(--pf-space-9); }
.pf-my-auto { margin-block: auto; }
.pf-my-px { margin-block: 1px; }
.pf-mt-0 { margin-top: 0; }
.pf-mt-1 { margin-top: var(--pf-space-1); }
.pf-mt-2 { margin-top: var(--pf-space-2); }
.pf-mt-3 { margin-top: var(--pf-space-3); }
.pf-mt-4 { margin-top: var(--pf-space-4); }
.pf-mt-5 { margin-top: var(--pf-space-5); }
.pf-mt-6 { margin-top: var(--pf-space-6); }
.pf-mt-7 { margin-top: var(--pf-space-7); }
.pf-mt-8 { margin-top: var(--pf-space-8); }
.pf-mt-9 { margin-top: var(--pf-space-9); }
.pf-mt-auto { margin-top: auto; }
.pf-mt-px { margin-top: 1px; }
.pf-me-0 { margin-inline-end: 0; }
.pf-me-1 { margin-inline-end: var(--pf-space-1); }
.pf-me-2 { margin-inline-end: var(--pf-space-2); }
.pf-me-3 { margin-inline-end: var(--pf-space-3); }
.pf-me-4 { margin-inline-end: var(--pf-space-4); }
.pf-me-5 { margin-inline-end: var(--pf-space-5); }
.pf-me-6 { margin-inline-end: var(--pf-space-6); }
.pf-me-7 { margin-inline-end: var(--pf-space-7); }
.pf-me-8 { margin-inline-end: var(--pf-space-8); }
.pf-me-9 { margin-inline-end: var(--pf-space-9); }
.pf-me-auto { margin-inline-end: auto; }
.pf-me-px { margin-inline-end: 1px; }
.pf-mb-0 { margin-bottom: 0; }
.pf-mb-1 { margin-bottom: var(--pf-space-1); }
.pf-mb-2 { margin-bottom: var(--pf-space-2); }
.pf-mb-3 { margin-bottom: var(--pf-space-3); }
.pf-mb-4 { margin-bottom: var(--pf-space-4); }
.pf-mb-5 { margin-bottom: var(--pf-space-5); }
.pf-mb-6 { margin-bottom: var(--pf-space-6); }
.pf-mb-7 { margin-bottom: var(--pf-space-7); }
.pf-mb-8 { margin-bottom: var(--pf-space-8); }
.pf-mb-9 { margin-bottom: var(--pf-space-9); }
.pf-mb-auto { margin-bottom: auto; }
.pf-mb-px { margin-bottom: 1px; }
.pf-ms-0 { margin-inline-start: 0; }
.pf-ms-1 { margin-inline-start: var(--pf-space-1); }
.pf-ms-2 { margin-inline-start: var(--pf-space-2); }
.pf-ms-3 { margin-inline-start: var(--pf-space-3); }
.pf-ms-4 { margin-inline-start: var(--pf-space-4); }
.pf-ms-5 { margin-inline-start: var(--pf-space-5); }
.pf-ms-6 { margin-inline-start: var(--pf-space-6); }
.pf-ms-7 { margin-inline-start: var(--pf-space-7); }
.pf-ms-8 { margin-inline-start: var(--pf-space-8); }
.pf-ms-9 { margin-inline-start: var(--pf-space-9); }
.pf-ms-auto { margin-inline-start: auto; }
.pf-ms-px { margin-inline-start: 1px; }
/* ==========================================================================
#GAP
==========================================================================
Works on any flex or grid parent, including the Core primitives:
...
========================================================================== */
.pf-gap-0 { gap: 0; }
.pf-gap-1 { gap: var(--pf-space-1); }
.pf-gap-2 { gap: var(--pf-space-2); }
.pf-gap-3 { gap: var(--pf-space-3); }
.pf-gap-4 { gap: var(--pf-space-4); }
.pf-gap-5 { gap: var(--pf-space-5); }
.pf-gap-6 { gap: var(--pf-space-6); }
.pf-gap-7 { gap: var(--pf-space-7); }
.pf-gap-8 { gap: var(--pf-space-8); }
.pf-gap-9 { gap: var(--pf-space-9); }
.pf-gap-px { gap: 1px; }
.pf-gap-x-0 { column-gap: 0; }
.pf-gap-x-1 { column-gap: var(--pf-space-1); }
.pf-gap-x-2 { column-gap: var(--pf-space-2); }
.pf-gap-x-3 { column-gap: var(--pf-space-3); }
.pf-gap-x-4 { column-gap: var(--pf-space-4); }
.pf-gap-x-5 { column-gap: var(--pf-space-5); }
.pf-gap-x-6 { column-gap: var(--pf-space-6); }
.pf-gap-x-7 { column-gap: var(--pf-space-7); }
.pf-gap-x-8 { column-gap: var(--pf-space-8); }
.pf-gap-x-9 { column-gap: var(--pf-space-9); }
.pf-gap-x-px { column-gap: 1px; }
.pf-gap-y-0 { row-gap: 0; }
.pf-gap-y-1 { row-gap: var(--pf-space-1); }
.pf-gap-y-2 { row-gap: var(--pf-space-2); }
.pf-gap-y-3 { row-gap: var(--pf-space-3); }
.pf-gap-y-4 { row-gap: var(--pf-space-4); }
.pf-gap-y-5 { row-gap: var(--pf-space-5); }
.pf-gap-y-6 { row-gap: var(--pf-space-6); }
.pf-gap-y-7 { row-gap: var(--pf-space-7); }
.pf-gap-y-8 { row-gap: var(--pf-space-8); }
.pf-gap-y-9 { row-gap: var(--pf-space-9); }
.pf-gap-y-px { row-gap: 1px; }
.pf-gap-fluid { gap: var(--pf-gap); }
.pf-gap-fluid-lg { gap: var(--pf-gap-lg); }
/* ==========================================================================
#GRID TRACKS AND PLACEMENT
==========================================================================
Shorthands for a one-off grid that does not need the twelve-column system.
.pf-cols-3 is three equal tracks that do NOT collapse on their own - use
.pf-grid--3 from Core when you want the responsive behaviour handled.
========================================================================== */
.pf-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pf-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-cols-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf-cols-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pf-cols-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pf-cols-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--pf-min, 260px), 100%), 1fr)); }
.pf-cols-sidebar { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.pf-span-1 { grid-column: span 1; }
.pf-span-2 { grid-column: span 2; }
.pf-span-3 { grid-column: span 3; }
.pf-span-4 { grid-column: span 4; }
.pf-span-6 { grid-column: span 6; }
.pf-row-span-2 { grid-row: span 2; }
.pf-place-center { place-items: center; }
.pf-place-start { place-items: start; }
.pf-place-end { place-items: end; }
.pf-self-start { align-self: start; }
.pf-self-center { align-self: center; }
.pf-self-end { align-self: end; }
.pf-self-stretch { align-self: stretch; }
.pf-content-between { align-content: space-between; }
.pf-content-start { align-content: start; }
/* ==========================================================================
#PROPORTIONAL WIDTHS
==========================================================================
Percentages in steps of five, plus the common fractions.
These exist for a specific reason: a progress bar, a meter or a chart
column is data, and the obvious way to express data is an inline style.
A strict Content-Security-Policy forbids inline styles outright, so a
framework that leaves you no other option has quietly forced you to
weaken your policy. Twenty-one classes are cheaper than 'unsafe-inline'.
For a value that genuinely needs single-percent precision, set
--pf-progress-value in a stylesheet you control rather than on the element.
========================================================================== */
.pf-w-0 { width: 0%; }
.pf-w-5 { width: 5%; }
.pf-w-10 { width: 10%; }
.pf-w-15 { width: 15%; }
.pf-w-20 { width: 20%; }
.pf-w-25 { width: 25%; }
.pf-w-30 { width: 30%; }
.pf-w-35 { width: 35%; }
.pf-w-40 { width: 40%; }
.pf-w-45 { width: 45%; }
.pf-w-50 { width: 50%; }
.pf-w-55 { width: 55%; }
.pf-w-60 { width: 60%; }
.pf-w-65 { width: 65%; }
.pf-w-70 { width: 70%; }
.pf-w-75 { width: 75%; }
.pf-w-80 { width: 80%; }
.pf-w-85 { width: 85%; }
.pf-w-90 { width: 90%; }
.pf-w-95 { width: 95%; }
.pf-w-100 { width: 100%; }
.pf-w-1-2 { width: 50%; }
.pf-w-1-3 { width: 33.3333%; }
.pf-w-2-3 { width: 66.6667%; }
.pf-w-1-4 { width: 25%; }
.pf-w-3-4 { width: 75%; }
.pf-w-1-5 { width: 20%; }
.pf-w-2-5 { width: 40%; }
.pf-w-3-5 { width: 60%; }
.pf-w-4-5 { width: 80%; }
/* ==========================================================================
#FLEX SIZING
========================================================================== */
.pf-flex-1 { flex: 1 1 0%; }
.pf-flex-auto { flex: 1 1 auto; }
.pf-flex-initial { flex: 0 1 auto; }
.pf-flex-none { flex: none; }
.pf-grow-0 { flex-grow: 0; }
.pf-grow-1 { flex-grow: 1; }
.pf-shrink-1 { flex-shrink: 1; }
.pf-basis-0 { flex-basis: 0; }
.pf-basis-auto { flex-basis: auto; }
.pf-basis-full { flex-basis: 100%; }
.pf-basis-half { flex-basis: 50%; }
/* ==========================================================================
#RESPONSIVE SPACING
==========================================================================
Only the six most-used families are generated per breakpoint - padding,
block and inline padding, margin top and bottom, and gap. Generating all
eighty at five breakpoints is how a utility file reaches 300 KB and a
build step stops being optional.
========================================================================== */
@media (min-width: 576px) {
.pf-sm-p-0 { padding: 0; }
.pf-sm-px-0 { padding-inline: 0; }
.pf-sm-py-0 { padding-block: 0; }
.pf-sm-mt-0 { margin-top: 0; }
.pf-sm-mb-0 { margin-bottom: 0; }
.pf-sm-gap-0 { gap: 0; }
.pf-sm-p-1 { padding: var(--pf-space-1); }
.pf-sm-px-1 { padding-inline: var(--pf-space-1); }
.pf-sm-py-1 { padding-block: var(--pf-space-1); }
.pf-sm-mt-1 { margin-top: var(--pf-space-1); }
.pf-sm-mb-1 { margin-bottom: var(--pf-space-1); }
.pf-sm-gap-1 { gap: var(--pf-space-1); }
.pf-sm-p-2 { padding: var(--pf-space-2); }
.pf-sm-px-2 { padding-inline: var(--pf-space-2); }
.pf-sm-py-2 { padding-block: var(--pf-space-2); }
.pf-sm-mt-2 { margin-top: var(--pf-space-2); }
.pf-sm-mb-2 { margin-bottom: var(--pf-space-2); }
.pf-sm-gap-2 { gap: var(--pf-space-2); }
.pf-sm-p-3 { padding: var(--pf-space-3); }
.pf-sm-px-3 { padding-inline: var(--pf-space-3); }
.pf-sm-py-3 { padding-block: var(--pf-space-3); }
.pf-sm-mt-3 { margin-top: var(--pf-space-3); }
.pf-sm-mb-3 { margin-bottom: var(--pf-space-3); }
.pf-sm-gap-3 { gap: var(--pf-space-3); }
.pf-sm-p-4 { padding: var(--pf-space-4); }
.pf-sm-px-4 { padding-inline: var(--pf-space-4); }
.pf-sm-py-4 { padding-block: var(--pf-space-4); }
.pf-sm-mt-4 { margin-top: var(--pf-space-4); }
.pf-sm-mb-4 { margin-bottom: var(--pf-space-4); }
.pf-sm-gap-4 { gap: var(--pf-space-4); }
.pf-sm-p-5 { padding: var(--pf-space-5); }
.pf-sm-px-5 { padding-inline: var(--pf-space-5); }
.pf-sm-py-5 { padding-block: var(--pf-space-5); }
.pf-sm-mt-5 { margin-top: var(--pf-space-5); }
.pf-sm-mb-5 { margin-bottom: var(--pf-space-5); }
.pf-sm-gap-5 { gap: var(--pf-space-5); }
.pf-sm-p-6 { padding: var(--pf-space-6); }
.pf-sm-px-6 { padding-inline: var(--pf-space-6); }
.pf-sm-py-6 { padding-block: var(--pf-space-6); }
.pf-sm-mt-6 { margin-top: var(--pf-space-6); }
.pf-sm-mb-6 { margin-bottom: var(--pf-space-6); }
.pf-sm-gap-6 { gap: var(--pf-space-6); }
.pf-sm-p-7 { padding: var(--pf-space-7); }
.pf-sm-px-7 { padding-inline: var(--pf-space-7); }
.pf-sm-py-7 { padding-block: var(--pf-space-7); }
.pf-sm-mt-7 { margin-top: var(--pf-space-7); }
.pf-sm-mb-7 { margin-bottom: var(--pf-space-7); }
.pf-sm-gap-7 { gap: var(--pf-space-7); }
.pf-sm-p-8 { padding: var(--pf-space-8); }
.pf-sm-px-8 { padding-inline: var(--pf-space-8); }
.pf-sm-py-8 { padding-block: var(--pf-space-8); }
.pf-sm-mt-8 { margin-top: var(--pf-space-8); }
.pf-sm-mb-8 { margin-bottom: var(--pf-space-8); }
.pf-sm-gap-8 { gap: var(--pf-space-8); }
.pf-sm-p-9 { padding: var(--pf-space-9); }
.pf-sm-px-9 { padding-inline: var(--pf-space-9); }
.pf-sm-py-9 { padding-block: var(--pf-space-9); }
.pf-sm-mt-9 { margin-top: var(--pf-space-9); }
.pf-sm-mb-9 { margin-bottom: var(--pf-space-9); }
.pf-sm-gap-9 { gap: var(--pf-space-9); }
.pf-sm-p-px { padding: 1px; }
.pf-sm-px-px { padding-inline: 1px; }
.pf-sm-py-px { padding-block: 1px; }
.pf-sm-mt-px { margin-top: 1px; }
.pf-sm-mb-px { margin-bottom: 1px; }
.pf-sm-gap-px { gap: 1px; }
.pf-sm-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pf-sm-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-sm-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-sm-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-sm-cols-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.pf-md-p-0 { padding: 0; }
.pf-md-px-0 { padding-inline: 0; }
.pf-md-py-0 { padding-block: 0; }
.pf-md-mt-0 { margin-top: 0; }
.pf-md-mb-0 { margin-bottom: 0; }
.pf-md-gap-0 { gap: 0; }
.pf-md-p-1 { padding: var(--pf-space-1); }
.pf-md-px-1 { padding-inline: var(--pf-space-1); }
.pf-md-py-1 { padding-block: var(--pf-space-1); }
.pf-md-mt-1 { margin-top: var(--pf-space-1); }
.pf-md-mb-1 { margin-bottom: var(--pf-space-1); }
.pf-md-gap-1 { gap: var(--pf-space-1); }
.pf-md-p-2 { padding: var(--pf-space-2); }
.pf-md-px-2 { padding-inline: var(--pf-space-2); }
.pf-md-py-2 { padding-block: var(--pf-space-2); }
.pf-md-mt-2 { margin-top: var(--pf-space-2); }
.pf-md-mb-2 { margin-bottom: var(--pf-space-2); }
.pf-md-gap-2 { gap: var(--pf-space-2); }
.pf-md-p-3 { padding: var(--pf-space-3); }
.pf-md-px-3 { padding-inline: var(--pf-space-3); }
.pf-md-py-3 { padding-block: var(--pf-space-3); }
.pf-md-mt-3 { margin-top: var(--pf-space-3); }
.pf-md-mb-3 { margin-bottom: var(--pf-space-3); }
.pf-md-gap-3 { gap: var(--pf-space-3); }
.pf-md-p-4 { padding: var(--pf-space-4); }
.pf-md-px-4 { padding-inline: var(--pf-space-4); }
.pf-md-py-4 { padding-block: var(--pf-space-4); }
.pf-md-mt-4 { margin-top: var(--pf-space-4); }
.pf-md-mb-4 { margin-bottom: var(--pf-space-4); }
.pf-md-gap-4 { gap: var(--pf-space-4); }
.pf-md-p-5 { padding: var(--pf-space-5); }
.pf-md-px-5 { padding-inline: var(--pf-space-5); }
.pf-md-py-5 { padding-block: var(--pf-space-5); }
.pf-md-mt-5 { margin-top: var(--pf-space-5); }
.pf-md-mb-5 { margin-bottom: var(--pf-space-5); }
.pf-md-gap-5 { gap: var(--pf-space-5); }
.pf-md-p-6 { padding: var(--pf-space-6); }
.pf-md-px-6 { padding-inline: var(--pf-space-6); }
.pf-md-py-6 { padding-block: var(--pf-space-6); }
.pf-md-mt-6 { margin-top: var(--pf-space-6); }
.pf-md-mb-6 { margin-bottom: var(--pf-space-6); }
.pf-md-gap-6 { gap: var(--pf-space-6); }
.pf-md-p-7 { padding: var(--pf-space-7); }
.pf-md-px-7 { padding-inline: var(--pf-space-7); }
.pf-md-py-7 { padding-block: var(--pf-space-7); }
.pf-md-mt-7 { margin-top: var(--pf-space-7); }
.pf-md-mb-7 { margin-bottom: var(--pf-space-7); }
.pf-md-gap-7 { gap: var(--pf-space-7); }
.pf-md-p-8 { padding: var(--pf-space-8); }
.pf-md-px-8 { padding-inline: var(--pf-space-8); }
.pf-md-py-8 { padding-block: var(--pf-space-8); }
.pf-md-mt-8 { margin-top: var(--pf-space-8); }
.pf-md-mb-8 { margin-bottom: var(--pf-space-8); }
.pf-md-gap-8 { gap: var(--pf-space-8); }
.pf-md-p-9 { padding: var(--pf-space-9); }
.pf-md-px-9 { padding-inline: var(--pf-space-9); }
.pf-md-py-9 { padding-block: var(--pf-space-9); }
.pf-md-mt-9 { margin-top: var(--pf-space-9); }
.pf-md-mb-9 { margin-bottom: var(--pf-space-9); }
.pf-md-gap-9 { gap: var(--pf-space-9); }
.pf-md-p-px { padding: 1px; }
.pf-md-px-px { padding-inline: 1px; }
.pf-md-py-px { padding-block: 1px; }
.pf-md-mt-px { margin-top: 1px; }
.pf-md-mb-px { margin-bottom: 1px; }
.pf-md-gap-px { gap: 1px; }
.pf-md-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pf-md-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-md-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-md-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-md-cols-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.pf-lg-p-0 { padding: 0; }
.pf-lg-px-0 { padding-inline: 0; }
.pf-lg-py-0 { padding-block: 0; }
.pf-lg-mt-0 { margin-top: 0; }
.pf-lg-mb-0 { margin-bottom: 0; }
.pf-lg-gap-0 { gap: 0; }
.pf-lg-p-1 { padding: var(--pf-space-1); }
.pf-lg-px-1 { padding-inline: var(--pf-space-1); }
.pf-lg-py-1 { padding-block: var(--pf-space-1); }
.pf-lg-mt-1 { margin-top: var(--pf-space-1); }
.pf-lg-mb-1 { margin-bottom: var(--pf-space-1); }
.pf-lg-gap-1 { gap: var(--pf-space-1); }
.pf-lg-p-2 { padding: var(--pf-space-2); }
.pf-lg-px-2 { padding-inline: var(--pf-space-2); }
.pf-lg-py-2 { padding-block: var(--pf-space-2); }
.pf-lg-mt-2 { margin-top: var(--pf-space-2); }
.pf-lg-mb-2 { margin-bottom: var(--pf-space-2); }
.pf-lg-gap-2 { gap: var(--pf-space-2); }
.pf-lg-p-3 { padding: var(--pf-space-3); }
.pf-lg-px-3 { padding-inline: var(--pf-space-3); }
.pf-lg-py-3 { padding-block: var(--pf-space-3); }
.pf-lg-mt-3 { margin-top: var(--pf-space-3); }
.pf-lg-mb-3 { margin-bottom: var(--pf-space-3); }
.pf-lg-gap-3 { gap: var(--pf-space-3); }
.pf-lg-p-4 { padding: var(--pf-space-4); }
.pf-lg-px-4 { padding-inline: var(--pf-space-4); }
.pf-lg-py-4 { padding-block: var(--pf-space-4); }
.pf-lg-mt-4 { margin-top: var(--pf-space-4); }
.pf-lg-mb-4 { margin-bottom: var(--pf-space-4); }
.pf-lg-gap-4 { gap: var(--pf-space-4); }
.pf-lg-p-5 { padding: var(--pf-space-5); }
.pf-lg-px-5 { padding-inline: var(--pf-space-5); }
.pf-lg-py-5 { padding-block: var(--pf-space-5); }
.pf-lg-mt-5 { margin-top: var(--pf-space-5); }
.pf-lg-mb-5 { margin-bottom: var(--pf-space-5); }
.pf-lg-gap-5 { gap: var(--pf-space-5); }
.pf-lg-p-6 { padding: var(--pf-space-6); }
.pf-lg-px-6 { padding-inline: var(--pf-space-6); }
.pf-lg-py-6 { padding-block: var(--pf-space-6); }
.pf-lg-mt-6 { margin-top: var(--pf-space-6); }
.pf-lg-mb-6 { margin-bottom: var(--pf-space-6); }
.pf-lg-gap-6 { gap: var(--pf-space-6); }
.pf-lg-p-7 { padding: var(--pf-space-7); }
.pf-lg-px-7 { padding-inline: var(--pf-space-7); }
.pf-lg-py-7 { padding-block: var(--pf-space-7); }
.pf-lg-mt-7 { margin-top: var(--pf-space-7); }
.pf-lg-mb-7 { margin-bottom: var(--pf-space-7); }
.pf-lg-gap-7 { gap: var(--pf-space-7); }
.pf-lg-p-8 { padding: var(--pf-space-8); }
.pf-lg-px-8 { padding-inline: var(--pf-space-8); }
.pf-lg-py-8 { padding-block: var(--pf-space-8); }
.pf-lg-mt-8 { margin-top: var(--pf-space-8); }
.pf-lg-mb-8 { margin-bottom: var(--pf-space-8); }
.pf-lg-gap-8 { gap: var(--pf-space-8); }
.pf-lg-p-9 { padding: var(--pf-space-9); }
.pf-lg-px-9 { padding-inline: var(--pf-space-9); }
.pf-lg-py-9 { padding-block: var(--pf-space-9); }
.pf-lg-mt-9 { margin-top: var(--pf-space-9); }
.pf-lg-mb-9 { margin-bottom: var(--pf-space-9); }
.pf-lg-gap-9 { gap: var(--pf-space-9); }
.pf-lg-p-px { padding: 1px; }
.pf-lg-px-px { padding-inline: 1px; }
.pf-lg-py-px { padding-block: 1px; }
.pf-lg-mt-px { margin-top: 1px; }
.pf-lg-mb-px { margin-bottom: 1px; }
.pf-lg-gap-px { gap: 1px; }
.pf-lg-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pf-lg-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-lg-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-lg-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-lg-cols-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.pf-xl-p-0 { padding: 0; }
.pf-xl-px-0 { padding-inline: 0; }
.pf-xl-py-0 { padding-block: 0; }
.pf-xl-mt-0 { margin-top: 0; }
.pf-xl-mb-0 { margin-bottom: 0; }
.pf-xl-gap-0 { gap: 0; }
.pf-xl-p-1 { padding: var(--pf-space-1); }
.pf-xl-px-1 { padding-inline: var(--pf-space-1); }
.pf-xl-py-1 { padding-block: var(--pf-space-1); }
.pf-xl-mt-1 { margin-top: var(--pf-space-1); }
.pf-xl-mb-1 { margin-bottom: var(--pf-space-1); }
.pf-xl-gap-1 { gap: var(--pf-space-1); }
.pf-xl-p-2 { padding: var(--pf-space-2); }
.pf-xl-px-2 { padding-inline: var(--pf-space-2); }
.pf-xl-py-2 { padding-block: var(--pf-space-2); }
.pf-xl-mt-2 { margin-top: var(--pf-space-2); }
.pf-xl-mb-2 { margin-bottom: var(--pf-space-2); }
.pf-xl-gap-2 { gap: var(--pf-space-2); }
.pf-xl-p-3 { padding: var(--pf-space-3); }
.pf-xl-px-3 { padding-inline: var(--pf-space-3); }
.pf-xl-py-3 { padding-block: var(--pf-space-3); }
.pf-xl-mt-3 { margin-top: var(--pf-space-3); }
.pf-xl-mb-3 { margin-bottom: var(--pf-space-3); }
.pf-xl-gap-3 { gap: var(--pf-space-3); }
.pf-xl-p-4 { padding: var(--pf-space-4); }
.pf-xl-px-4 { padding-inline: var(--pf-space-4); }
.pf-xl-py-4 { padding-block: var(--pf-space-4); }
.pf-xl-mt-4 { margin-top: var(--pf-space-4); }
.pf-xl-mb-4 { margin-bottom: var(--pf-space-4); }
.pf-xl-gap-4 { gap: var(--pf-space-4); }
.pf-xl-p-5 { padding: var(--pf-space-5); }
.pf-xl-px-5 { padding-inline: var(--pf-space-5); }
.pf-xl-py-5 { padding-block: var(--pf-space-5); }
.pf-xl-mt-5 { margin-top: var(--pf-space-5); }
.pf-xl-mb-5 { margin-bottom: var(--pf-space-5); }
.pf-xl-gap-5 { gap: var(--pf-space-5); }
.pf-xl-p-6 { padding: var(--pf-space-6); }
.pf-xl-px-6 { padding-inline: var(--pf-space-6); }
.pf-xl-py-6 { padding-block: var(--pf-space-6); }
.pf-xl-mt-6 { margin-top: var(--pf-space-6); }
.pf-xl-mb-6 { margin-bottom: var(--pf-space-6); }
.pf-xl-gap-6 { gap: var(--pf-space-6); }
.pf-xl-p-7 { padding: var(--pf-space-7); }
.pf-xl-px-7 { padding-inline: var(--pf-space-7); }
.pf-xl-py-7 { padding-block: var(--pf-space-7); }
.pf-xl-mt-7 { margin-top: var(--pf-space-7); }
.pf-xl-mb-7 { margin-bottom: var(--pf-space-7); }
.pf-xl-gap-7 { gap: var(--pf-space-7); }
.pf-xl-p-8 { padding: var(--pf-space-8); }
.pf-xl-px-8 { padding-inline: var(--pf-space-8); }
.pf-xl-py-8 { padding-block: var(--pf-space-8); }
.pf-xl-mt-8 { margin-top: var(--pf-space-8); }
.pf-xl-mb-8 { margin-bottom: var(--pf-space-8); }
.pf-xl-gap-8 { gap: var(--pf-space-8); }
.pf-xl-p-9 { padding: var(--pf-space-9); }
.pf-xl-px-9 { padding-inline: var(--pf-space-9); }
.pf-xl-py-9 { padding-block: var(--pf-space-9); }
.pf-xl-mt-9 { margin-top: var(--pf-space-9); }
.pf-xl-mb-9 { margin-bottom: var(--pf-space-9); }
.pf-xl-gap-9 { gap: var(--pf-space-9); }
.pf-xl-p-px { padding: 1px; }
.pf-xl-px-px { padding-inline: 1px; }
.pf-xl-py-px { padding-block: 1px; }
.pf-xl-mt-px { margin-top: 1px; }
.pf-xl-mb-px { margin-bottom: 1px; }
.pf-xl-gap-px { gap: 1px; }
.pf-xl-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pf-xl-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-xl-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-xl-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-xl-cols-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
}