/*! PolyFishCSS-Grid.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
 *
 * A twelve-column responsive grid, for the times when the Core primitives
 * (.pf-grid, .pf-split, .pf-shell) are not enough and you want explicit
 * control per breakpoint.
 *
 * Depends on: PolyFishCSS-Core.css (gutter and space tokens).
 * Load order: after Core, before Utilities.
 *
 * CONTENTS
 *   1. Rows and columns
 *   2. Column widths, offsets and order
 *   3. Breakpoint variants
 *   4. Row gutters and alignment
 *
 * WHEN NOT TO USE IT
 *   Most layouts do not need a column system. `.pf-grid--3` is one class and
 *   handles its own breakpoints; `.pf-row` plus `.pf-col-md-4` is two classes
 *   per child and handles them by hand. Reach for this when the design really
 *   does change proportion per breakpoint - an 8/4 split that becomes 7/5
 *   before it stacks - and use the primitives everywhere else.
 *
 * MARKUP
 *   <div class="pf-row">
 *     <div class="pf-col-12 pf-col-md-8">main</div>
 *     <div class="pf-col-12 pf-col-md-4">aside</div>
 *   </div>
 *
 * BREAKPOINTS
 *   sm 576px   md 768px   lg 992px   xl 1200px   xxl 1400px
 *   Mobile first: an unprefixed class applies at every width, a prefixed one
 *   applies from that width up.
 */

@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.grid`. 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.

     <link rel="stylesheet" href="PolyFishCSS-Core.min.css">
     <link rel="stylesheet" href="my-app.css">   <!-- wins, always -->

   If you want your CSS layered too, name a layer after the framework's:

     @layer polyfish, app;
     @layer app { .card { background: rebeccapurple; } }
   ========================================================================== */

@layer polyfish.grid {
  /* ==========================================================================
     #ROWS AND COLUMNS
     ========================================================================== */
  
  /**
   * The row is a twelve-track grid rather than a float or flexbox row, so
   * columns line up vertically as well as horizontally and a short column does
   * not drag the next one up into the gap beside it.
   */
  .pf-row {
    --pf-row-cols: 12;
    display: grid;
    grid-template-columns: repeat(var(--pf-row-cols), minmax(0, 1fr));
    column-gap: var(--pf-gutter-x, var(--pf-gap));
    row-gap: var(--pf-gutter-y, var(--pf-gap));
  }
  
  /* A column with no width takes an equal share of what is left. */
  .pf-col { grid-column: span 1; }
  .pf-col-auto { grid-column: auto; }
  
  /* Every column child gets the overflow guard, for the same reason Core's
     primitives do: a wide table or a long word must not stretch its track. */
  .pf-row > * { min-width: 0; }
  
  /* ==========================================================================
     #COLUMN WIDTHS, OFFSETS AND ORDER
     ========================================================================== */
  .pf-col-1 { grid-column: span 1; }
  .pf-col-2 { grid-column: span 2; }
  .pf-col-3 { grid-column: span 3; }
  .pf-col-4 { grid-column: span 4; }
  .pf-col-5 { grid-column: span 5; }
  .pf-col-6 { grid-column: span 6; }
  .pf-col-7 { grid-column: span 7; }
  .pf-col-8 { grid-column: span 8; }
  .pf-col-9 { grid-column: span 9; }
  .pf-col-10 { grid-column: span 10; }
  .pf-col-11 { grid-column: span 11; }
  .pf-col-12 { grid-column: span 12; }
  
  .pf-offset-0 { margin-inline-start: 0; }
  .pf-offset-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
  .pf-offset-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
  .pf-offset-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
  .pf-offset-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
  .pf-offset-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
  .pf-offset-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
  .pf-offset-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
  .pf-offset-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
  .pf-offset-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
  .pf-offset-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
  .pf-offset-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
  
  .pf-order-first { order: -1; }
  .pf-order-last { order: 13; }
  .pf-order-1 { order: 1; }
  .pf-order-2 { order: 2; }
  .pf-order-3 { order: 3; }
  .pf-order-4 { order: 4; }
  .pf-order-5 { order: 5; }
  .pf-order-6 { order: 6; }
  .pf-order-7 { order: 7; }
  .pf-order-8 { order: 8; }
  .pf-order-9 { order: 9; }
  .pf-order-10 { order: 10; }
  .pf-order-11 { order: 11; }
  .pf-order-12 { order: 12; }
  
  /* ==========================================================================
     #BREAKPOINT VARIANTS
     ========================================================================== */
  
  @media (min-width: 576px) {
    .pf-col-sm-auto { grid-column: auto; }
    .pf-col-sm-1 { grid-column: span 1; }
    .pf-col-sm-2 { grid-column: span 2; }
    .pf-col-sm-3 { grid-column: span 3; }
    .pf-col-sm-4 { grid-column: span 4; }
    .pf-col-sm-5 { grid-column: span 5; }
    .pf-col-sm-6 { grid-column: span 6; }
    .pf-col-sm-7 { grid-column: span 7; }
    .pf-col-sm-8 { grid-column: span 8; }
    .pf-col-sm-9 { grid-column: span 9; }
    .pf-col-sm-10 { grid-column: span 10; }
    .pf-col-sm-11 { grid-column: span 11; }
    .pf-col-sm-12 { grid-column: span 12; }
    .pf-offset-sm-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
    .pf-offset-sm-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
    .pf-offset-sm-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
    .pf-offset-sm-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
    .pf-offset-sm-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
    .pf-offset-sm-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
    .pf-offset-sm-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
    .pf-offset-sm-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
    .pf-offset-sm-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
    .pf-offset-sm-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
    .pf-offset-sm-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
    .pf-offset-sm-0 { margin-inline-start: 0; }
    .pf-order-sm-1 { order: 1; }
    .pf-order-sm-2 { order: 2; }
    .pf-order-sm-3 { order: 3; }
    .pf-order-sm-4 { order: 4; }
    .pf-order-sm-5 { order: 5; }
    .pf-order-sm-6 { order: 6; }
    .pf-order-sm-7 { order: 7; }
    .pf-order-sm-8 { order: 8; }
    .pf-order-sm-9 { order: 9; }
    .pf-order-sm-10 { order: 10; }
    .pf-order-sm-11 { order: 11; }
    .pf-order-sm-12 { order: 12; }
  }
  
  @media (min-width: 768px) {
    .pf-col-md-auto { grid-column: auto; }
    .pf-col-md-1 { grid-column: span 1; }
    .pf-col-md-2 { grid-column: span 2; }
    .pf-col-md-3 { grid-column: span 3; }
    .pf-col-md-4 { grid-column: span 4; }
    .pf-col-md-5 { grid-column: span 5; }
    .pf-col-md-6 { grid-column: span 6; }
    .pf-col-md-7 { grid-column: span 7; }
    .pf-col-md-8 { grid-column: span 8; }
    .pf-col-md-9 { grid-column: span 9; }
    .pf-col-md-10 { grid-column: span 10; }
    .pf-col-md-11 { grid-column: span 11; }
    .pf-col-md-12 { grid-column: span 12; }
    .pf-offset-md-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
    .pf-offset-md-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
    .pf-offset-md-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
    .pf-offset-md-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
    .pf-offset-md-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
    .pf-offset-md-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
    .pf-offset-md-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
    .pf-offset-md-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
    .pf-offset-md-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
    .pf-offset-md-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
    .pf-offset-md-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
    .pf-offset-md-0 { margin-inline-start: 0; }
    .pf-order-md-1 { order: 1; }
    .pf-order-md-2 { order: 2; }
    .pf-order-md-3 { order: 3; }
    .pf-order-md-4 { order: 4; }
    .pf-order-md-5 { order: 5; }
    .pf-order-md-6 { order: 6; }
    .pf-order-md-7 { order: 7; }
    .pf-order-md-8 { order: 8; }
    .pf-order-md-9 { order: 9; }
    .pf-order-md-10 { order: 10; }
    .pf-order-md-11 { order: 11; }
    .pf-order-md-12 { order: 12; }
  }
  
  @media (min-width: 992px) {
    .pf-col-lg-auto { grid-column: auto; }
    .pf-col-lg-1 { grid-column: span 1; }
    .pf-col-lg-2 { grid-column: span 2; }
    .pf-col-lg-3 { grid-column: span 3; }
    .pf-col-lg-4 { grid-column: span 4; }
    .pf-col-lg-5 { grid-column: span 5; }
    .pf-col-lg-6 { grid-column: span 6; }
    .pf-col-lg-7 { grid-column: span 7; }
    .pf-col-lg-8 { grid-column: span 8; }
    .pf-col-lg-9 { grid-column: span 9; }
    .pf-col-lg-10 { grid-column: span 10; }
    .pf-col-lg-11 { grid-column: span 11; }
    .pf-col-lg-12 { grid-column: span 12; }
    .pf-offset-lg-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
    .pf-offset-lg-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
    .pf-offset-lg-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
    .pf-offset-lg-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
    .pf-offset-lg-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
    .pf-offset-lg-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
    .pf-offset-lg-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
    .pf-offset-lg-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
    .pf-offset-lg-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
    .pf-offset-lg-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
    .pf-offset-lg-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
    .pf-offset-lg-0 { margin-inline-start: 0; }
    .pf-order-lg-1 { order: 1; }
    .pf-order-lg-2 { order: 2; }
    .pf-order-lg-3 { order: 3; }
    .pf-order-lg-4 { order: 4; }
    .pf-order-lg-5 { order: 5; }
    .pf-order-lg-6 { order: 6; }
    .pf-order-lg-7 { order: 7; }
    .pf-order-lg-8 { order: 8; }
    .pf-order-lg-9 { order: 9; }
    .pf-order-lg-10 { order: 10; }
    .pf-order-lg-11 { order: 11; }
    .pf-order-lg-12 { order: 12; }
  }
  
  @media (min-width: 1200px) {
    .pf-col-xl-auto { grid-column: auto; }
    .pf-col-xl-1 { grid-column: span 1; }
    .pf-col-xl-2 { grid-column: span 2; }
    .pf-col-xl-3 { grid-column: span 3; }
    .pf-col-xl-4 { grid-column: span 4; }
    .pf-col-xl-5 { grid-column: span 5; }
    .pf-col-xl-6 { grid-column: span 6; }
    .pf-col-xl-7 { grid-column: span 7; }
    .pf-col-xl-8 { grid-column: span 8; }
    .pf-col-xl-9 { grid-column: span 9; }
    .pf-col-xl-10 { grid-column: span 10; }
    .pf-col-xl-11 { grid-column: span 11; }
    .pf-col-xl-12 { grid-column: span 12; }
    .pf-offset-xl-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
    .pf-offset-xl-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
    .pf-offset-xl-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
    .pf-offset-xl-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
    .pf-offset-xl-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
    .pf-offset-xl-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
    .pf-offset-xl-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
    .pf-offset-xl-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
    .pf-offset-xl-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
    .pf-offset-xl-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
    .pf-offset-xl-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
    .pf-offset-xl-0 { margin-inline-start: 0; }
    .pf-order-xl-1 { order: 1; }
    .pf-order-xl-2 { order: 2; }
    .pf-order-xl-3 { order: 3; }
    .pf-order-xl-4 { order: 4; }
    .pf-order-xl-5 { order: 5; }
    .pf-order-xl-6 { order: 6; }
    .pf-order-xl-7 { order: 7; }
    .pf-order-xl-8 { order: 8; }
    .pf-order-xl-9 { order: 9; }
    .pf-order-xl-10 { order: 10; }
    .pf-order-xl-11 { order: 11; }
    .pf-order-xl-12 { order: 12; }
  }
  
  @media (min-width: 1400px) {
    .pf-col-xxl-auto { grid-column: auto; }
    .pf-col-xxl-1 { grid-column: span 1; }
    .pf-col-xxl-2 { grid-column: span 2; }
    .pf-col-xxl-3 { grid-column: span 3; }
    .pf-col-xxl-4 { grid-column: span 4; }
    .pf-col-xxl-5 { grid-column: span 5; }
    .pf-col-xxl-6 { grid-column: span 6; }
    .pf-col-xxl-7 { grid-column: span 7; }
    .pf-col-xxl-8 { grid-column: span 8; }
    .pf-col-xxl-9 { grid-column: span 9; }
    .pf-col-xxl-10 { grid-column: span 10; }
    .pf-col-xxl-11 { grid-column: span 11; }
    .pf-col-xxl-12 { grid-column: span 12; }
    .pf-offset-xxl-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
    .pf-offset-xxl-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
    .pf-offset-xxl-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
    .pf-offset-xxl-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
    .pf-offset-xxl-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
    .pf-offset-xxl-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
    .pf-offset-xxl-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
    .pf-offset-xxl-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
    .pf-offset-xxl-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
    .pf-offset-xxl-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
    .pf-offset-xxl-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
    .pf-offset-xxl-0 { margin-inline-start: 0; }
    .pf-order-xxl-1 { order: 1; }
    .pf-order-xxl-2 { order: 2; }
    .pf-order-xxl-3 { order: 3; }
    .pf-order-xxl-4 { order: 4; }
    .pf-order-xxl-5 { order: 5; }
    .pf-order-xxl-6 { order: 6; }
    .pf-order-xxl-7 { order: 7; }
    .pf-order-xxl-8 { order: 8; }
    .pf-order-xxl-9 { order: 9; }
    .pf-order-xxl-10 { order: 10; }
    .pf-order-xxl-11 { order: 11; }
    .pf-order-xxl-12 { order: 12; }
  }
  
  /* ==========================================================================
     #ROW GUTTERS AND ALIGNMENT
     ========================================================================== */
  
  /**
   * Gutters are two custom properties, so a row can be tightened or opened up
   * without a modifier per size:
   *   <div class="pf-row pf-g-0">        no gutters at all
   *   <div class="pf-row pf-gx-5 pf-gy-2"> wide columns, tight rows
   */
  .pf-g-0  { --pf-gutter-x: 0; --pf-gutter-y: 0; }
  .pf-g-1  { --pf-gutter-x: var(--pf-space-1); --pf-gutter-y: var(--pf-space-1); }
  .pf-g-2  { --pf-gutter-x: var(--pf-space-2); --pf-gutter-y: var(--pf-space-2); }
  .pf-g-3  { --pf-gutter-x: var(--pf-space-3); --pf-gutter-y: var(--pf-space-3); }
  .pf-g-4  { --pf-gutter-x: var(--pf-space-4); --pf-gutter-y: var(--pf-space-4); }
  .pf-g-5  { --pf-gutter-x: var(--pf-space-5); --pf-gutter-y: var(--pf-space-5); }
  .pf-g-6  { --pf-gutter-x: var(--pf-space-6); --pf-gutter-y: var(--pf-space-6); }
  
  .pf-gx-0 { --pf-gutter-x: 0; }
  .pf-gx-2 { --pf-gutter-x: var(--pf-space-2); }
  .pf-gx-4 { --pf-gutter-x: var(--pf-space-4); }
  .pf-gx-6 { --pf-gutter-x: var(--pf-space-6); }
  .pf-gy-0 { --pf-gutter-y: 0; }
  .pf-gy-2 { --pf-gutter-y: var(--pf-space-2); }
  .pf-gy-4 { --pf-gutter-y: var(--pf-space-4); }
  .pf-gy-6 { --pf-gutter-y: var(--pf-space-6); }
  
  /* Alignment within the row. align-* is the cross axis, justify-* the main. */
  .pf-row--top { align-items: start; }
  .pf-row--middle { align-items: center; }
  .pf-row--bottom { align-items: end; }
  .pf-row--stretch { align-items: stretch; }
  
  /* Equal-height children regardless of content, for card rows. */
  .pf-row--equal > * { display: flex; }
  .pf-row--equal > * > * { flex: 1; }
  
  /**
   * Auto-columns: n equal tracks with no per-child classes, the shorthand for
   * the common case.
   *   <div class="pf-row pf-row-cols-3"> three equal columns
   */
  .pf-row-cols-1 { --pf-row-cols: 1; }
  .pf-row-cols-2 { --pf-row-cols: 2; }
  .pf-row-cols-3 { --pf-row-cols: 3; }
  .pf-row-cols-4 { --pf-row-cols: 4; }
  .pf-row-cols-6 { --pf-row-cols: 6; }
  .pf-row-cols-1 > *, .pf-row-cols-2 > *, .pf-row-cols-3 > *,
  .pf-row-cols-4 > *, .pf-row-cols-6 > * { grid-column: span 1; }
  
  @media (min-width: 576px) {
    .pf-row-cols-sm-1 { --pf-row-cols: 1; }
    .pf-row-cols-sm-2 { --pf-row-cols: 2; }
    .pf-row-cols-sm-3 { --pf-row-cols: 3; }
    .pf-row-cols-sm-4 { --pf-row-cols: 4; }
    .pf-row-cols-sm-6 { --pf-row-cols: 6; }
  }
  @media (min-width: 768px) {
    .pf-row-cols-md-1 { --pf-row-cols: 1; }
    .pf-row-cols-md-2 { --pf-row-cols: 2; }
    .pf-row-cols-md-3 { --pf-row-cols: 3; }
    .pf-row-cols-md-4 { --pf-row-cols: 4; }
    .pf-row-cols-md-6 { --pf-row-cols: 6; }
  }
  @media (min-width: 992px) {
    .pf-row-cols-lg-1 { --pf-row-cols: 1; }
    .pf-row-cols-lg-2 { --pf-row-cols: 2; }
    .pf-row-cols-lg-3 { --pf-row-cols: 3; }
    .pf-row-cols-lg-4 { --pf-row-cols: 4; }
    .pf-row-cols-lg-6 { --pf-row-cols: 6; }
  }
  @media (min-width: 1200px) {
    .pf-row-cols-xl-1 { --pf-row-cols: 1; }
    .pf-row-cols-xl-2 { --pf-row-cols: 2; }
    .pf-row-cols-xl-3 { --pf-row-cols: 3; }
    .pf-row-cols-xl-4 { --pf-row-cols: 4; }
    .pf-row-cols-xl-6 { --pf-row-cols: 6; }
  }
}