/**/
/*
 * flex-grid.css — A lightweight flexbox grid library
 * =====================================================
 * A 12-column grid system plus utility helpers built
 * entirely on CSS flexbox. No dependencies.
 *
 * TABLE OF CONTENTS
 * -----------------
 * 1. Container
 * 2. Row
 * 3. Column sizing  (.col-1 through .col-12)
 * 4. Responsive breakpoints (sm / md / lg / xl)
 * 5. Row modifiers   (justify, align, wrap, gap)
 * 6. Column modifiers (self-align, order, offset)
 * 7. Display helpers (flex / inline-flex)
 * 8. CSS custom properties (override to theme)
 *
 * QUICK START
 * -----------
 *   <div class="container">
 *     <div class="row gap-md">
 *       <div class="col-12 col-md-8">main content</div>
 *       <div class="col-12 col-md-4">sidebar</div>
 *     </div>
 *   </div>

 There are also margin and padding helpers: .m-1 .pl-5 and so on.
 */

/* ─── 8. CSS Custom Properties ──────────────────────── */

:root {
  --fg-columns: 12;
  --fg-gutter: 1rem;
  /* default gap between columns   */
  --fg-gutter-sm: 0.5rem;
  --fg-gutter-md: 1rem;
  --fg-gutter-lg: 1.5rem;
  --fg-gutter-xl: 2rem;
  --fg-container-sm: 540px;
  --fg-container-md: 720px;
  --fg-container-lg: 960px;
  --fg-container-xl: 1200px;
  --fg-container-xxl: 1500px;
}

/* ─── Breakpoint reference ───────────────────────────
 *   sm  ≥ 576px
 *   md  ≥ 768px
 *   lg  ≥ 992px
 *   xl  ≥ 1200px
 *  xxl  ≥ 1500px 
 * ─────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════
   1. Container
   ═══════════════════════════════════════════════════ */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--fg-gutter);
  padding-left: var(--fg-gutter);
  box-sizing: border-box;
}

/* grid is fluid container */
.grid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--fg-gutter);
  padding-left: var(--fg-gutter);
  box-sizing: border-box;
}

@media (min-width: 576px) {
  .container {
    max-width: var(--fg-container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--fg-container-md);
  }
}

@media (min-width: 992px) {
  .container {
    max-width: var(--fg-container-lg);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--fg-container-xl);
  }
}

@media (min-width: 1500px) {
  .container {
    max-width: var(--fg-container-xxl);
  }
}

/* ═══════════════════════════════════════════════════
   2. Row
   ═══════════════════════════════════════════════════ */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--fg-gutter) / -2);
  margin-left: calc(var(--fg-gutter) / -2);
  box-sizing: border-box;
}

/* Rows that should NOT wrap */
.row-nowrap {
  flex-wrap: nowrap;
}

/* Reverse column order */
.row-reverse {
  flex-direction: row-reverse;
}


/* ═══════════════════════════════════════════════════
   3. Column sizing — base (mobile-first, all sizes)
   ═══════════════════════════════════════════════════ */

[class*="col-"],
.col {
  box-sizing: border-box;
  padding-right: calc(var(--fg-gutter) / 2);
  padding-left: calc(var(--fg-gutter) / 2);
  min-width: 0;
  /* prevents overflow with long content */
}

/* .col — auto-size equal-width column */
.col {
  flex: 1 1 0%;
}

/* .col-auto — shrinks to content width */
.col-auto {
  flex: 0 0 auto;
  width: auto;
  padding-right: calc(var(--fg-gutter) / 2);
  padding-left: calc(var(--fg-gutter) / 2);
  box-sizing: border-box;
  min-width: 0;
}

/* .col-1 through .col-12 */
.col-1 {
  flex: 0 0 calc(1 / 12 * 100%);
  max-width: calc(1 / 12 * 100%);
}

.col-2 {
  flex: 0 0 calc(2 / 12 * 100%);
  max-width: calc(2 / 12 * 100%);
}

.col-3 {
  flex: 0 0 calc(3 / 12 * 100%);
  max-width: calc(3 / 12 * 100%);
}

.col-4 {
  flex: 0 0 calc(4 / 12 * 100%);
  max-width: calc(4 / 12 * 100%);
}

.col-5 {
  flex: 0 0 calc(5 / 12 * 100%);
  max-width: calc(5 / 12 * 100%);
}

.col-6 {
  flex: 0 0 calc(6 / 12 * 100%);
  max-width: calc(6 / 12 * 100%);
}

.col-7 {
  flex: 0 0 calc(7 / 12 * 100%);
  max-width: calc(7 / 12 * 100%);
}

.col-8 {
  flex: 0 0 calc(8 / 12 * 100%);
  max-width: calc(8 / 12 * 100%);
}

.col-9 {
  flex: 0 0 calc(9 / 12 * 100%);
  max-width: calc(9 / 12 * 100%);
}

.col-10 {
  flex: 0 0 calc(10 / 12 * 100%);
  max-width: calc(10 / 12 * 100%);
}

.col-11 {
  flex: 0 0 calc(11 / 12 * 100%);
  max-width: calc(11 / 12 * 100%);
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════
   4. Responsive breakpoints
   ═══════════════════════════════════════════════════ */

/* ── sm ≥ 576px ──────────────────────────────────── */
@media (min-width: 576px) {
  .col-sm {
    flex: 1 1 0%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-sm-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
  }

  .col-sm-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
  }

  .col-sm-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
  }

  .col-sm-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
  }

  .col-sm-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
  }

  .col-sm-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
  }

  .col-sm-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
  }

  .col-sm-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
  }

  .col-sm-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
  }

  .col-sm-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
  }

  .col-sm-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: calc(1 / 12 * 100%);
  }

  .offset-sm-2 {
    margin-left: calc(2 / 12 * 100%);
  }

  .offset-sm-3 {
    margin-left: calc(3 / 12 * 100%);
  }

  .offset-sm-4 {
    margin-left: calc(4 / 12 * 100%);
  }

  .offset-sm-5 {
    margin-left: calc(5 / 12 * 100%);
  }

  .offset-sm-6 {
    margin-left: calc(6 / 12 * 100%);
  }

  .offset-sm-7 {
    margin-left: calc(7 / 12 * 100%);
  }

  .offset-sm-8 {
    margin-left: calc(8 / 12 * 100%);
  }

  .offset-sm-9 {
    margin-left: calc(9 / 12 * 100%);
  }

  .offset-sm-10 {
    margin-left: calc(10 / 12 * 100%);
  }

  .offset-sm-11 {
    margin-left: calc(11 / 12 * 100%);
  }
}

/* ── md ≥ 768px ──────────────────────────────────── */
@media (min-width: 768px) {
  .col-md {
    flex: 1 1 0%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-md-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
  }

  .col-md-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
  }

  .col-md-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
  }

  .col-md-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
  }

  .col-md-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
  }

  .col-md-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
  }

  .col-md-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
  }

  .col-md-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
  }

  .col-md-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
  }

  .col-md-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
  }

  .col-md-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: calc(1 / 12 * 100%);
  }

  .offset-md-2 {
    margin-left: calc(2 / 12 * 100%);
  }

  .offset-md-3 {
    margin-left: calc(3 / 12 * 100%);
  }

  .offset-md-4 {
    margin-left: calc(4 / 12 * 100%);
  }

  .offset-md-5 {
    margin-left: calc(5 / 12 * 100%);
  }

  .offset-md-6 {
    margin-left: calc(6 / 12 * 100%);
  }

  .offset-md-7 {
    margin-left: calc(7 / 12 * 100%);
  }

  .offset-md-8 {
    margin-left: calc(8 / 12 * 100%);
  }

  .offset-md-9 {
    margin-left: calc(9 / 12 * 100%);
  }

  .offset-md-10 {
    margin-left: calc(10 / 12 * 100%);
  }

  .offset-md-11 {
    margin-left: calc(11 / 12 * 100%);
  }
}

/* ── lg ≥ 992px ──────────────────────────────────── */
@media (min-width: 992px) {
  .col-lg {
    flex: 1 1 0%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-lg-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
  }

  .col-lg-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
  }

  .col-lg-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
  }

  .col-lg-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
  }

  .col-lg-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
  }

  .col-lg-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
  }

  .col-lg-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
  }

  .col-lg-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
  }

  .col-lg-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
  }

  .col-lg-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
  }

  .col-lg-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: calc(1 / 12 * 100%);
  }

  .offset-lg-2 {
    margin-left: calc(2 / 12 * 100%);
  }

  .offset-lg-3 {
    margin-left: calc(3 / 12 * 100%);
  }

  .offset-lg-4 {
    margin-left: calc(4 / 12 * 100%);
  }

  .offset-lg-5 {
    margin-left: calc(5 / 12 * 100%);
  }

  .offset-lg-6 {
    margin-left: calc(6 / 12 * 100%);
  }

  .offset-lg-7 {
    margin-left: calc(7 / 12 * 100%);
  }

  .offset-lg-8 {
    margin-left: calc(8 / 12 * 100%);
  }

  .offset-lg-9 {
    margin-left: calc(9 / 12 * 100%);
  }

  .offset-lg-10 {
    margin-left: calc(10 / 12 * 100%);
  }

  .offset-lg-11 {
    margin-left: calc(11 / 12 * 100%);
  }
}

/* ── xl ≥ 1200px ─────────────────────────────────── */
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 1 0%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xl-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
  }

  .col-xl-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
  }

  .col-xl-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
  }

  .col-xl-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
  }

  .col-xl-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
  }

  .col-xl-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
  }

  .col-xl-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
  }

  .col-xl-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
  }

  .col-xl-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
  }

  .col-xl-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
  }

  .col-xl-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: calc(1 / 12 * 100%);
  }

  .offset-xl-2 {
    margin-left: calc(2 / 12 * 100%);
  }

  .offset-xl-3 {
    margin-left: calc(3 / 12 * 100%);
  }

  .offset-xl-4 {
    margin-left: calc(4 / 12 * 100%);
  }

  .offset-xl-5 {
    margin-left: calc(5 / 12 * 100%);
  }

  .offset-xl-6 {
    margin-left: calc(6 / 12 * 100%);
  }

  .offset-xl-7 {
    margin-left: calc(7 / 12 * 100%);
  }

  .offset-xl-8 {
    margin-left: calc(8 / 12 * 100%);
  }

  .offset-xl-9 {
    margin-left: calc(9 / 12 * 100%);
  }

  .offset-xl-10 {
    margin-left: calc(10 / 12 * 100%);
  }

  .offset-xl-11 {
    margin-left: calc(11 / 12 * 100%);
  }
}


/* ═══════════════════════════════════════════════════
   5. Row modifiers — justify-content
   ═══════════════════════════════════════════════════ */

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}


/* ═══════════════════════════════════════════════════
   5b. Row modifiers — align-items (cross-axis)
   ═══════════════════════════════════════════════════ */

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-baseline {
  align-items: baseline;
}

.align-stretch {
  align-items: stretch;
}

/* default */


/* ═══════════════════════════════════════════════════
   5c. Row modifiers — gap helpers
   ═══════════════════════════════════════════════════ */

/*
 * These set --fg-gutter locally on .row so the
 * column padding automatically scales with the gap.
 */

.gap-0 {
  --fg-gutter: 0;
  gap: 0;
}

.gap-sm {
  --fg-gutter: var(--fg-gutter-sm);
}

.gap-md {
  --fg-gutter: var(--fg-gutter-md);
}

.gap-lg {
  --fg-gutter: var(--fg-gutter-lg);
}

.gap-xl {
  --fg-gutter: var(--fg-gutter-xl);
}


/* ═══════════════════════════════════════════════════
   6. Column modifiers
   ═══════════════════════════════════════════════════ */

/* align-self overrides for individual columns */
.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

/* order */
.order-first {
  order: -1;
}

.order-last {
  order: 999;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

/* base offsets (no breakpoint prefix) */
.offset-0 {
  margin-left: 0;
}

.offset-1 {
  margin-left: calc(1 / 12 * 100%);
}

.offset-2 {
  margin-left: calc(2 / 12 * 100%);
}

.offset-3 {
  margin-left: calc(3 / 12 * 100%);
}

.offset-4 {
  margin-left: calc(4 / 12 * 100%);
}

.offset-5 {
  margin-left: calc(5 / 12 * 100%);
}

.offset-6 {
  margin-left: calc(6 / 12 * 100%);
}

.offset-7 {
  margin-left: calc(7 / 12 * 100%);
}

.offset-8 {
  margin-left: calc(8 / 12 * 100%);
}

.offset-9 {
  margin-left: calc(9 / 12 * 100%);
}

.offset-10 {
  margin-left: calc(10 / 12 * 100%);
}

.offset-11 {
  margin-left: calc(11 / 12 * 100%);
}


/* ═══════════════════════════════════════════════════
   7. Display helpers
   ═══════════════════════════════════════════════════ */

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-fill {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

/* ═══════════════════════════════════════════════════
   8. Spacing Helpers (Margin & Padding)
   ═══════════════════════════════════════════════════ */

/* Margin — All sides */
.m-0 {
  margin: 0px;
}

.m-1 {
  margin: 1px;
}

.m-2 {
  margin: 2px;
}

.m-3 {
  margin: 3px;
}

.m-4 {
  margin: 4px;
}

.m-5 {
  margin: 5px;
}

.m-6 {
  margin: 6px;
}

.m-7 {
  margin: 7px;
}

.m-8 {
  margin: 8px;
}

.m-9 {
  margin: 9px;
}

.m-10 {
  margin: 10px;
}

.m-12 {
  margin: 12px;
}

.m-14 {
  margin: 14px;
}

.m-16 {
  margin: 16px;
}

.m-18 {
  margin: 18px;
}

.m-20 {
  margin: 20px;
}

.m-24 {
  margin: 24px;
}

.m-28 {
  margin: 28px;
}

.m-32 {
  margin: 32px;
}

.m-36 {
  margin: 36px;
}

.m-40 {
  margin: 40px;
}

/* Margin — Top */
.mt-0 {
  margin-top: 0px;
}

.mt-1 {
  margin-top: 1px;
}

.mt-2 {
  margin-top: 2px;
}

.mt-3 {
  margin-top: 3px;
}

.mt-4 {
  margin-top: 4px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-6 {
  margin-top: 6px;
}

.mt-7 {
  margin-top: 7px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-9 {
  margin-top: 9px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-14 {
  margin-top: 14px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-18 {
  margin-top: 18px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-28 {
  margin-top: 28px;
}

.mt-32 {
  margin-top: 32px;
}

.mt-36 {
  margin-top: 36px;
}

.mt-40 {
  margin-top: 40px;
}

/* Margin — Right */
.mr-0 {
  margin-right: 0px;
}

.mr-1 {
  margin-right: 1px;
}

.mr-2 {
  margin-right: 2px;
}

.mr-3 {
  margin-right: 3px;
}

.mr-4 {
  margin-right: 4px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-6 {
  margin-right: 6px;
}

.mr-7 {
  margin-right: 7px;
}

.mr-8 {
  margin-right: 8px;
}

.mr-9 {
  margin-right: 9px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-12 {
  margin-right: 12px;
}

.mr-14 {
  margin-right: 14px;
}

.mr-16 {
  margin-right: 16px;
}

.mr-18 {
  margin-right: 18px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-24 {
  margin-right: 24px;
}

.mr-28 {
  margin-right: 28px;
}

.mr-32 {
  margin-right: 32px;
}

.mr-36 {
  margin-right: 36px;
}

.mr-40 {
  margin-right: 40px;
}

/* Margin — Bottom */
.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 1px;
}

.mb-2 {
  margin-bottom: 2px;
}

.mb-3 {
  margin-bottom: 3px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mb-7 {
  margin-bottom: 7px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-9 {
  margin-bottom: 9px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-36 {
  margin-bottom: 36px;
}

.mb-40 {
  margin-bottom: 40px;
}

/* Margin — Left */
.ml-0 {
  margin-left: 0px;
}

.ml-1 {
  margin-left: 1px;
}

.ml-2 {
  margin-left: 2px;
}

.ml-3 {
  margin-left: 3px;
}

.ml-4 {
  margin-left: 4px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-6 {
  margin-left: 6px;
}

.ml-7 {
  margin-left: 7px;
}

.ml-8 {
  margin-left: 8px;
}

.ml-9 {
  margin-left: 9px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-12 {
  margin-left: 12px;
}

.ml-14 {
  margin-left: 14px;
}

.ml-16 {
  margin-left: 16px;
}

.ml-18 {
  margin-left: 18px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-24 {
  margin-left: 24px;
}

.ml-28 {
  margin-left: 28px;
}

.ml-32 {
  margin-left: 32px;
}

.ml-36 {
  margin-left: 36px;
}

.ml-40 {
  margin-left: 40px;
}

/* Margin — Horizontal (left + right) */
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-1 {
  margin-left: 1px;
  margin-right: 1px;
}

.mx-2 {
  margin-left: 2px;
  margin-right: 2px;
}

.mx-3 {
  margin-left: 3px;
  margin-right: 3px;
}

.mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}

.mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}

.mx-6 {
  margin-left: 6px;
  margin-right: 6px;
}

.mx-7 {
  margin-left: 7px;
  margin-right: 7px;
}

.mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}

.mx-9 {
  margin-left: 9px;
  margin-right: 9px;
}

.mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}

.mx-14 {
  margin-left: 14px;
  margin-right: 14px;
}

.mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}

.mx-18 {
  margin-left: 18px;
  margin-right: 18px;
}

.mx-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.mx-24 {
  margin-left: 24px;
  margin-right: 24px;
}

.mx-28 {
  margin-left: 28px;
  margin-right: 28px;
}

.mx-32 {
  margin-left: 32px;
  margin-right: 32px;
}

.mx-36 {
  margin-left: 36px;
  margin-right: 36px;
}

.mx-40 {
  margin-left: 40px;
  margin-right: 40px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Margin — Vertical (top + bottom) */
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-1 {
  margin-top: 1px;
  margin-bottom: 1px;
}

.my-2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.my-3 {
  margin-top: 3px;
  margin-bottom: 3px;
}

.my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.my-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.my-6 {
  margin-top: 6px;
  margin-bottom: 6px;
}

.my-7 {
  margin-top: 7px;
  margin-bottom: 7px;
}

.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.my-9 {
  margin-top: 9px;
  margin-bottom: 9px;
}

.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.my-14 {
  margin-top: 14px;
  margin-bottom: 14px;
}

.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.my-18 {
  margin-top: 18px;
  margin-bottom: 18px;
}

.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.my-28 {
  margin-top: 28px;
  margin-bottom: 28px;
}

.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.my-36 {
  margin-top: 36px;
  margin-bottom: 36px;
}

.my-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Padding — All sides */
.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 1px;
}

.p-2 {
  padding: 2px;
}

.p-3 {
  padding: 3px;
}

.p-4 {
  padding: 4px;
}

.p-5 {
  padding: 5px;
}

.p-6 {
  padding: 6px;
}

.p-7 {
  padding: 7px;
}

.p-8 {
  padding: 8px;
}

.p-9 {
  padding: 9px;
}

.p-10 {
  padding: 10px;
}

.p-12 {
  padding: 12px;
}

.p-14 {
  padding: 14px;
}

.p-16 {
  padding: 16px;
}

.p-18 {
  padding: 18px;
}

.p-20 {
  padding: 20px;
}

.p-24 {
  padding: 24px;
}

.p-28 {
  padding: 28px;
}

.p-32 {
  padding: 32px;
}

.p-36 {
  padding: 36px;
}

.p-40 {
  padding: 40px;
}

/* Padding — Top */
.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 1px;
}

.pt-2 {
  padding-top: 2px;
}

.pt-3 {
  padding-top: 3px;
}

.pt-4 {
  padding-top: 4px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-6 {
  padding-top: 6px;
}

.pt-7 {
  padding-top: 7px;
}

.pt-8 {
  padding-top: 8px;
}

.pt-9 {
  padding-top: 9px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-12 {
  padding-top: 12px;
}

.pt-14 {
  padding-top: 14px;
}

.pt-16 {
  padding-top: 16px;
}

.pt-18 {
  padding-top: 18px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-24 {
  padding-top: 24px;
}

.pt-28 {
  padding-top: 28px;
}

.pt-32 {
  padding-top: 32px;
}

.pt-36 {
  padding-top: 36px;
}

.pt-40 {
  padding-top: 40px;
}

/* Padding — Right */
.pr-0 {
  padding-right: 0px;
}

.pr-1 {
  padding-right: 1px;
}

.pr-2 {
  padding-right: 2px;
}

.pr-3 {
  padding-right: 3px;
}

.pr-4 {
  padding-right: 4px;
}

.pr-5 {
  padding-right: 5px;
}

.pr-6 {
  padding-right: 6px;
}

.pr-7 {
  padding-right: 7px;
}

.pr-8 {
  padding-right: 8px;
}

.pr-9 {
  padding-right: 9px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-12 {
  padding-right: 12px;
}

.pr-14 {
  padding-right: 14px;
}

.pr-16 {
  padding-right: 16px;
}

.pr-18 {
  padding-right: 18px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-24 {
  padding-right: 24px;
}

.pr-28 {
  padding-right: 28px;
}

.pr-32 {
  padding-right: 32px;
}

.pr-36 {
  padding-right: 36px;
}

.pr-40 {
  padding-right: 40px;
}

/* Padding — Bottom */
.pb-0 {
  padding-bottom: 0px;
}

.pb-1 {
  padding-bottom: 1px;
}

.pb-2 {
  padding-bottom: 2px;
}

.pb-3 {
  padding-bottom: 3px;
}

.pb-4 {
  padding-bottom: 4px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-6 {
  padding-bottom: 6px;
}

.pb-7 {
  padding-bottom: 7px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pb-9 {
  padding-bottom: 9px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-12 {
  padding-bottom: 12px;
}

.pb-14 {
  padding-bottom: 14px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pb-18 {
  padding-bottom: 18px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-24 {
  padding-bottom: 24px;
}

.pb-28 {
  padding-bottom: 28px;
}

.pb-32 {
  padding-bottom: 32px;
}

.pb-36 {
  padding-bottom: 36px;
}

.pb-40 {
  padding-bottom: 40px;
}

/* Padding — Left */
.pl-0 {
  padding-left: 0px;
}

.pl-1 {
  padding-left: 1px;
}

.pl-2 {
  padding-left: 2px;
}

.pl-3 {
  padding-left: 3px;
}

.pl-4 {
  padding-left: 4px;
}

.pl-5 {
  padding-left: 5px;
}

.pl-6 {
  padding-left: 6px;
}

.pl-7 {
  padding-left: 7px;
}

.pl-8 {
  padding-left: 8px;
}

.pl-9 {
  padding-left: 9px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-12 {
  padding-left: 12px;
}

.pl-14 {
  padding-left: 14px;
}

.pl-16 {
  padding-left: 16px;
}

.pl-18 {
  padding-left: 18px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-24 {
  padding-left: 24px;
}

.pl-28 {
  padding-left: 28px;
}

.pl-32 {
  padding-left: 32px;
}

.pl-36 {
  padding-left: 36px;
}

.pl-40 {
  padding-left: 40px;
}

/* Padding — Horizontal (left + right) */
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-1 {
  padding-left: 1px;
  padding-right: 1px;
}

.px-2 {
  padding-left: 2px;
  padding-right: 2px;
}

.px-3 {
  padding-left: 3px;
  padding-right: 3px;
}

.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}

.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}

.px-6 {
  padding-left: 6px;
  padding-right: 6px;
}

.px-7 {
  padding-left: 7px;
  padding-right: 7px;
}

.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.px-9 {
  padding-left: 9px;
  padding-right: 9px;
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.px-14 {
  padding-left: 14px;
  padding-right: 14px;
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-18 {
  padding-left: 18px;
  padding-right: 18px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.px-28 {
  padding-left: 28px;
  padding-right: 28px;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

.px-36 {
  padding-left: 36px;
  padding-right: 36px;
}

.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}

/* Padding — Vertical (top + bottom) */
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-1 {
  padding-top: 1px;
  padding-bottom: 1px;
}

.py-2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.py-3 {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.py-7 {
  padding-top: 7px;
  padding-bottom: 7px;
}

.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-9 {
  padding-top: 9px;
  padding-bottom: 9px;
}

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-14 {
  padding-top: 14px;
  padding-bottom: 14px;
}

.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-18 {
  padding-top: 18px;
  padding-bottom: 18px;
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-28 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.py-36 {
  padding-top: 36px;
  padding-bottom: 36px;
}

.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ═══════════════════════════════════════════════════
   9. Preset grids
   ═══════════════════════════════════════════════════ */

.layout-header-main-footer {
  width: 100%;

  display: grid;
  grid:
    "header" auto "main" 1fr "footer" auto / 1fr;
  gap: 8px;
}

/*
<section class="layout-header-main-footer">
  <div class="header">1</div>
  <div class="main">2</div>
  <div class="footer">3</div>
</section>
*/

.layout-header-left-main-right-footer {
  width: 100%;

  display: grid;
  grid:
    "header header header" auto "leftSide main rightSide" 1fr "footer footer footer" auto / auto 1fr auto;
  gap: 8px;
}

/*
<section class="layout">
  <div class="header">1</div>
  <div class="leftSide">2</div>
  <div class="main">3</div>
  <div class="rightSide">4</div>
  <div class="footer">5</div>
</section>
*/

.layout-left-main {
  width: 100%;

  display: grid;
  grid:
    "sidebar main" 1fr / auto 1fr;
  gap: 8px;
}

/*
<section class="layout">
  <div class="sidebar">1</div>
  <div class="main">2</div>
</section>
*/

.layout-main-right {
  width: 100%;

  display: grid;
  grid:
    "main sidebar" 2fr / 1fr auto;
  gap: 8px;
}

/*
<section class="layout">
  <div class="main">1</div>
  <div class="sidebar">2</div>
</section>
*/

.sidebar {
  grid-area: sidebar;
}

.leftSide {
  grid-area: leftSide;
}

.rightSide {
  grid-area: rightSide;
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}