/* -------------------
   GRID SYSTEM
-------------------- */
.hb-grid {
    display: grid;
    gap: 2rem;
    grid-template-rows: auto;
  }
  
  .hb-grid--2  { grid-template-columns: repeat(2, 1fr); }
  .hb-grid--3  { grid-template-columns: repeat(3, 1fr); }
  .hb-grid--4  { grid-template-columns: repeat(4, 1fr); }
  .hb-grid--5  { grid-template-columns: repeat(5, 1fr); }
  .hb-grid--6  { grid-template-columns: repeat(6, 1fr); }
  .hb-grid--7  { grid-template-columns: repeat(7, 1fr); }
  .hb-grid--8  { grid-template-columns: repeat(8, 1fr); }
  .hb-grid--9  { grid-template-columns: repeat(9, 1fr); }
  .hb-grid--10 { grid-template-columns: repeat(10, 1fr); }
  .hb-grid--11 { grid-template-columns: repeat(11, 1fr); }
  .hb-grid--12 { grid-template-columns: repeat(12, 1fr); }


/* Column spans (explicit start/end lines) */
.hb-grid__col--1-1 { grid-column: 1 / 1; }
.hb-grid__col--1-2 { grid-column: 1 / 2; }
.hb-grid__col--1-3 { grid-column: 1 / 3; }
.hb-grid__col--1-4 { grid-column: 1 / 4; }
.hb-grid__col--1-5 { grid-column: 1 / 5; }
.hb-grid__col--1-6 { grid-column: 1 / 6; }
.hb-grid__col--1-7 { grid-column: 1 / 7; }
.hb-grid__col--1-8 { grid-column: 1 / 8; }
.hb-grid__col--1-9 { grid-column: 1 / 9; }
.hb-grid__col--1-10 { grid-column: 1 / 10; }
.hb-grid__col--1-11 { grid-column: 1 / 11; }
.hb-grid__col--1-12 { grid-column: 1 / 12; }
.hb-grid__col--1-13 { grid-column: 1 / 13; }

.hb-grid__col--2-2 { grid-column: 2 / 2; }
.hb-grid__col--2-3 { grid-column: 2 / 3; }
.hb-grid__col--2-4 { grid-column: 2 / 4; }
.hb-grid__col--2-5 { grid-column: 2 / 5; }
.hb-grid__col--2-6 { grid-column: 2 / 6; }
.hb-grid__col--2-7 { grid-column: 2 / 7; }
.hb-grid__col--2-8 { grid-column: 2 / 8; }
.hb-grid__col--2-9 { grid-column: 2 / 9; }
.hb-grid__col--2-10 { grid-column: 2 / 10; }
.hb-grid__col--2-11 { grid-column: 2 / 11; }
.hb-grid__col--2-12 { grid-column: 2 / 12; }
.hb-grid__col--2-13 { grid-column: 2 / 13; }

.hb-grid__col--3-3 { grid-column: 3 / 3; }
.hb-grid__col--3-4 { grid-column: 3 / 4; }
.hb-grid__col--3-5 { grid-column: 3 / 5; }
.hb-grid__col--3-6 { grid-column: 3 / 6; }
.hb-grid__col--3-7 { grid-column: 3 / 7; }
.hb-grid__col--3-8 { grid-column: 3 / 8; }
.hb-grid__col--3-9 { grid-column: 3 / 9; }
.hb-grid__col--3-10 { grid-column: 3 / 10; }
.hb-grid__col--3-11 { grid-column: 3 / 11; }
.hb-grid__col--3-12 { grid-column: 3 / 12; }
.hb-grid__col--3-13 { grid-column: 3 / 13; }

.hb-grid__col--4-4 { grid-column: 4 / 4; }
.hb-grid__col--4-5 { grid-column: 4 / 5; }
.hb-grid__col--4-6 { grid-column: 4 / 6; }
.hb-grid__col--4-7 { grid-column: 4 / 7; }
.hb-grid__col--4-8 { grid-column: 4 / 8; }
.hb-grid__col--4-9 { grid-column: 4 / 9; }
.hb-grid__col--4-10 { grid-column: 4 / 10; }
.hb-grid__col--4-11 { grid-column: 4 / 11; }
.hb-grid__col--4-12 { grid-column: 4 / 12; }
.hb-grid__col--4-13 { grid-column: 4 / 13; }

.hb-grid__col--5-5 { grid-column: 5 / 5; }
.hb-grid__col--5-6 { grid-column: 5 / 6; }
.hb-grid__col--5-7 { grid-column: 5 / 7; }
.hb-grid__col--5-8 { grid-column: 5 / 8; }
.hb-grid__col--5-9 { grid-column: 5 / 9; }
.hb-grid__col--5-10 { grid-column: 5 / 10; }
.hb-grid__col--5-11 { grid-column: 5 / 11; }
.hb-grid__col--5-12 { grid-column: 5 / 12; }
.hb-grid__col--5-13 { grid-column: 5 / 13; }

.hb-grid__col--6-6 { grid-column: 6 / 6; }
.hb-grid__col--6-7 { grid-column: 6 / 7; }
.hb-grid__col--6-8 { grid-column: 6 / 8; }
.hb-grid__col--6-9 { grid-column: 6 / 9; }
.hb-grid__col--6-10 { grid-column: 6 / 10; }
.hb-grid__col--6-11 { grid-column: 6 / 11; }
.hb-grid__col--6-12 { grid-column: 6 / 12; }
.hb-grid__col--6-13 { grid-column: 6 / 13; }

.hb-grid__col--7-7 { grid-column: 7 / 7; }
.hb-grid__col--7-8 { grid-column: 7 / 8; }
.hb-grid__col--7-9 { grid-column: 7 / 9; }
.hb-grid__col--7-10 { grid-column: 7 / 10; }
.hb-grid__col--7-11 { grid-column: 7 / 11; }
.hb-grid__col--7-12 { grid-column: 7 / 12; }
.hb-grid__col--7-13 { grid-column: 7 / 13; }

.hb-grid__col--8-8 { grid-column: 8 / 8; }
.hb-grid__col--8-9 { grid-column: 8 / 9; }
.hb-grid__col--8-10 { grid-column: 8 / 10; }
.hb-grid__col--8-11 { grid-column: 8 / 11; }
.hb-grid__col--8-12 { grid-column: 8 / 12; }
.hb-grid__col--8-13 { grid-column: 8 / 13; }

.hb-grid__col--9-9 { grid-column: 9 / 9; }
.hb-grid__col--9-10 { grid-column: 9 / 10; }
.hb-grid__col--9-11 { grid-column: 9 / 11; }
.hb-grid__col--9-12 { grid-column: 9 / 12; }
.hb-grid__col--9-13 { grid-column: 9 / 13; }

.hb-grid__col--10-10 { grid-column: 10 / 10; }
.hb-grid__col--10-11 { grid-column: 10 / 11; }
.hb-grid__col--10-12 { grid-column: 10 / 12; }
.hb-grid__col--10-13 { grid-column: 10 / 13; }

.hb-grid__col--11-11 { grid-column: 11 / 11; }
.hb-grid__col--11-12 { grid-column: 11 / 12; }
.hb-grid__col--11-13 { grid-column: 11 / 13; }

.hb-grid__col--12-12 { grid-column: 12 / 12; }
.hb-grid__col--12-13 { grid-column: 12 / 13; }

.hb-grid__col--13-13 { grid-column: 13 / 13; }

/* NEW: Simple span utilities (additive, no start line needed) */
.hb-grid__col-span--1  { grid-column: span 1; }
.hb-grid__col-span--2  { grid-column: span 2; }
.hb-grid__col-span--3  { grid-column: span 3; }
.hb-grid__col-span--4  { grid-column: span 4; }
.hb-grid__col-span--5  { grid-column: span 5; }
.hb-grid__col-span--6  { grid-column: span 6; }
.hb-grid__col-span--7  { grid-column: span 7; }
.hb-grid__col-span--8  { grid-column: span 8; }
.hb-grid__col-span--9  { grid-column: span 9; }
.hb-grid__col-span--10 { grid-column: span 10; }
.hb-grid__col-span--11 { grid-column: span 11; }
.hb-grid__col-span--12 { grid-column: span 12; }
.hb-grid__col-span--full { grid-column: 1 / -1; } /* full-bleed */

.hb-grid__row-span--1  { grid-row: span 1; }
.hb-grid__row-span--2  { grid-row: span 2; }
.hb-grid__row-span--3  { grid-row: span 3; }
.hb-grid__row-span--4  { grid-row: span 4; }
.hb-grid__row-span--5  { grid-row: span 5; }
.hb-grid__row-span--6  { grid-row: span 6; }
.hb-grid__row-span--7  { grid-row: span 7; }
.hb-grid__row-span--8  { grid-row: span 8; }
.hb-grid__row-span--9  { grid-row: span 9; }
.hb-grid__row-span--10 { grid-row: span 10; }
.hb-grid__row-span--11 { grid-row: span 11; }
.hb-grid__row-span--12 { grid-row: span 12; }
.hb-grid__row-span--full { grid-row: 1 / -1; }

/* (Optional helpers if you like tight packing with spans) */
.hb-grid__flow-row-dense { grid-auto-flow: row dense; }
.hb-grid__flow-col-dense { grid-auto-flow: column dense; }
  
  /* Gap utilities */
  .hb-grid__gap--0   { gap: 0rem; }
  .hb-grid__gap--0_5 { gap: .5rem; }
  .hb-grid__gap--1   { gap: 1rem; }
  .hb-grid__gap--2   { gap: 2rem; }
  .hb-grid__gap--3   { gap: 3rem; }
  .hb-grid__gap--4   { gap: 4rem; }
  .hb-grid__gap--5   { gap: 5rem; }
  .hb-grid__gap--6   { gap: 6rem; }
  .hb-grid__gap--7   { gap: 7rem; }
  .hb-grid__gap--8   { gap: 8rem; }
  .hb-grid__gap--9   { gap: 9rem; }
  .hb-grid__gap--10  { gap: 10rem; }
  .hb-grid__gap--11  { gap: 11rem; }
  .hb-grid__gap--12  { gap: 12rem; }
  
  /* -------------------
     FLEXBOX UTILITIES
  -------------------- */
/* Core layout container */
.hb-flex {
  display: flex;
  gap: 2rem;
}

/* Flex wrap utilities */
.hb-flex__wrap         { flex-wrap: wrap; }
.hb-flex__nowrap       { flex-wrap: nowrap; }

/* Flex direction */
.hb-flex__row          { flex-direction: row; }
.hb-flex__column       { flex-direction: column; }
.hb-flex__row--reverse { flex-direction: row-reverse; }
.hb-flex__column--reverse { flex-direction: column-reverse; }

/* Align items */
.hb-grid__align--start,
.hb-flex__align--start    { align-items: flex-start; }
.hb-grid__align--center,
.hb-flex__align--center   { align-items: center; }
.hb-grid__align--end,
.hb-flex__align--end      { align-items: flex-end; }
.hb-grid__align--stretch,
.hb-flex__align--stretch  { align-items: stretch; }

/* Justify content */
.hb-flex__justify--start    { justify-content: flex-start; }
.hb-flex__justify--center   { justify-content: center; }
.hb-flex__justify--end      { justify-content: flex-end; }
.hb-flex__justify--between  { justify-content: space-between; }
.hb-flex__justify--around   { justify-content: space-around; }
.hb-flex__justify--evenly   { justify-content: space-evenly; }

/* Flex column width utilities for 1–12 columns */
.hb-flex__1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.hb-flex__2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.hb-flex__3  { flex: 0 0 25%;      max-width: 25%; }
.hb-flex__4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.hb-flex__5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.hb-flex__6  { flex: 0 0 50%;      max-width: 50%; }
.hb-flex__7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.hb-flex__8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.hb-flex__9  { flex: 0 0 75%;      max-width: 75%; }
.hb-flex__10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.hb-flex__11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.hb-flex__12 { flex: 0 0 100%;     max-width: 100%; }


  
  /* -------------------
     MULTI-COLUMN UTILITIES
  -------------------- */
  .hb-columns--2 { column-count: 2; column-gap: 2rem; }
  .hb-columns--3 { column-count: 3; column-gap: 2rem; }
  .hb-columns--4 { column-count: 4; column-gap: 2rem; }
  
  .hb-columns__gap--1 { column-gap: 1rem; }
  .hb-columns__gap--2 { column-gap: 2rem; }
  .hb-columns__gap--3 { column-gap: 3rem; }
  .hb-columns__gap--4 { column-gap: 4rem; }

  /* -------------------
    MARGIN / PADDING UTILITIES
----------------------- */

/* Margin */
.hb-m--0 { margin: 0rem; }
.hb-m--0-5 { margin: 0.5rem; }
.hb-m--1 { margin: 1rem; }
.hb-m--1-5 { margin: 1.5rem; }
.hb-m--2 { margin: 2rem; }
.hb-m--2-5 { margin: 2.5rem; }
.hb-m--3 { margin: 3rem; }
.hb-m--3-5 { margin: 3.5rem; }
.hb-m--4 { margin: 4rem; }
.hb-m--4-5 { margin: 4.5rem; }
.hb-m--5 { margin: 5rem; }
.hb-m--5-5 { margin: 5.5rem; }
.hb-m--6 { margin: 6rem; }
.hb-m--6-5 { margin: 6.5rem; }
.hb-m--7 { margin: 7rem; }
.hb-m--7-5 { margin: 7.5rem; }
.hb-m--8 { margin: 8rem; }
.hb-m--8-5 { margin: 8.5rem; }
.hb-m--9 { margin: 9rem; }
.hb-m--9-5 { margin: 9.5rem; }
.hb-m--10 { margin: 10rem; }

/* Padding */
.hb-p--0 { padding: 0rem; }
.hb-p--0-5 { padding: 0.5rem; }
.hb-p--1 { padding: 1rem; }
.hb-p--1-5 { padding: 1.5rem; }
.hb-p--2 { padding: 2rem; }
.hb-p--2-5 { padding: 2.5rem; }
.hb-p--3 { padding: 3rem; }
.hb-p--3-5 { padding: 3.5rem; }
.hb-p--4 { padding: 4rem; }
.hb-p--4-5 { padding: 4.5rem; }
.hb-p--5 { padding: 5rem; }
.hb-p--5-5 { padding: 5.5rem; }
.hb-p--6 { padding: 6rem; }
.hb-p--6-5 { padding: 6.5rem; }
.hb-p--7 { padding: 7rem; }
.hb-p--7-5 { padding: 7.5rem; }
.hb-p--8 { padding: 8rem; }
.hb-p--8-5 { padding: 8.5rem; }
.hb-p--9 { padding: 9rem; }
.hb-p--9-5 { padding: 9.5rem; }
.hb-p--10 { padding: 10rem; }

/* Margin Top */
.hb-mt--0 { margin-top: 0rem; }
.hb-mt--0-5 { margin-top: 0.5rem; }
.hb-mt--1 { margin-top: 1rem; }
.hb-mt--1-5 { margin-top: 1.5rem; }
.hb-mt--2 { margin-top: 2rem; }
.hb-mt--2-5 { margin-top: 2.5rem; }
.hb-mt--3 { margin-top: 3rem; }
.hb-mt--3-5 { margin-top: 3.5rem; }
.hb-mt--4 { margin-top: 4rem; }
.hb-mt--4-5 { margin-top: 4.5rem; }
.hb-mt--5 { margin-top: 5rem; }
.hb-mt--5-5 { margin-top: 5.5rem; }
.hb-mt--6 { margin-top: 6rem; }
.hb-mt--6-5 { margin-top: 6.5rem; }
.hb-mt--7 { margin-top: 7rem; }
.hb-mt--7-5 { margin-top: 7.5rem; }
.hb-mt--8 { margin-top: 8rem; }
.hb-mt--8-5 { margin-top: 8.5rem; }
.hb-mt--9 { margin-top: 9rem; }
.hb-mt--9-5 { margin-top: 9.5rem; }
.hb-mt--10 { margin-top: 10rem; }

/* Margin Right */
.hb-mr--auto { margin-right: auto; }
.hb-mr--0 { margin-right: 0rem; }
.hb-mr--0-5 { margin-right: 0.5rem; }
.hb-mr--1 { margin-right: 1rem; }
.hb-mr--1-5 { margin-right: 1.5rem; }
.hb-mr--2 { margin-right: 2rem; }
.hb-mr--2-5 { margin-right: 2.5rem; }
.hb-mr--3 { margin-right: 3rem; }
.hb-mr--3-5 { margin-right: 3.5rem; }
.hb-mr--4 { margin-right: 4rem; }
.hb-mr--4-5 { margin-right: 4.5rem; }
.hb-mr--5 { margin-right: 5rem; }
.hb-mr--5-5 { margin-right: 5.5rem; }
.hb-mr--6 { margin-right: 6rem; }
.hb-mr--6-5 { margin-right: 6.5rem; }
.hb-mr--7 { margin-right: 7rem; }
.hb-mr--7-5 { margin-right: 7.5rem; }
.hb-mr--8 { margin-right: 8rem; }
.hb-mr--8-5 { margin-right: 8.5rem; }
.hb-mr--9 { margin-right: 9rem; }
.hb-mr--9-5 { margin-right: 9.5rem; }
.hb-mr--10 { margin-right: 10rem; }

/* Margin Bottom */
.hb-mb--0 { margin-bottom: 0rem; }
.hb-mb--0-5 { margin-bottom: 0.5rem; }
.hb-mb--1 { margin-bottom: 1rem; }
.hb-mb--1-5 { margin-bottom: 1.5rem; }
.hb-mb--2 { margin-bottom: 2rem; }
.hb-mb--2-5 { margin-bottom: 2.5rem; }
.hb-mb--3 { margin-bottom: 3rem; }
.hb-mb--3-5 { margin-bottom: 3.5rem; }
.hb-mb--4 { margin-bottom: 4rem; }
.hb-mb--4-5 { margin-bottom: 4.5rem; }
.hb-mb--5 { margin-bottom: 5rem; }
.hb-mb--5-5 { margin-bottom: 5.5rem; }
.hb-mb--6 { margin-bottom: 6rem; }
.hb-mb--6-5 { margin-bottom: 6.5rem; }
.hb-mb--7 { margin-bottom: 7rem; }
.hb-mb--7-5 { margin-bottom: 7.5rem; }
.hb-mb--8 { margin-bottom: 8rem; }
.hb-mb--8-5 { margin-bottom: 8.5rem; }
.hb-mb--9 { margin-bottom: 9rem; }
.hb-mb--9-5 { margin-bottom: 9.5rem; }
.hb-mb--10 { margin-bottom: 10rem; }

/* Margin Left */
.hb-ml--auto { margin-left: auto; }
.hb-ml--0 { margin-left: 0rem; }
.hb-ml--0-5 { margin-left: 0.5rem; }
.hb-ml--1 { margin-left: 1rem; }
.hb-ml--1-5 { margin-left: 1.5rem; }
.hb-ml--2 { margin-left: 2rem; }
.hb-ml--2-5 { margin-left: 2.5rem; }
.hb-ml--3 { margin-left: 3rem; }
.hb-ml--3-5 { margin-left: 3.5rem; }
.hb-ml--4 { margin-left: 4rem; }
.hb-ml--4-5 { margin-left: 4.5rem; }
.hb-ml--5 { margin-left: 5rem; }
.hb-ml--5-5 { margin-left: 5.5rem; }
.hb-ml--6 { margin-left: 6rem; }
.hb-ml--6-5 { margin-left: 6.5rem; }
.hb-ml--7 { margin-left: 7rem; }
.hb-ml--7-5 { margin-left: 7.5rem; }
.hb-ml--8 { margin-left: 8rem; }
.hb-ml--8-5 { margin-left: 8.5rem; }
.hb-ml--9 { margin-left: 9rem; }
.hb-ml--9-5 { margin-left: 9.5rem; }
.hb-ml--10 { margin-left: 10rem; }

/* Padding Top */
.hb-pt--0 { padding-top: 0rem; }
.hb-pt--0-5 { padding-top: 0.5rem; }
.hb-pt--1 { padding-top: 1rem; }
.hb-pt--1-5 { padding-top: 1.5rem; }
.hb-pt--2 { padding-top: 2rem; }
.hb-pt--2-5 { padding-top: 2.5rem; }
.hb-pt--3 { padding-top: 3rem; }
.hb-pt--3-5 { padding-top: 3.5rem; }
.hb-pt--4 { padding-top: 4rem; }
.hb-pt--4-5 { padding-top: 4.5rem; }
.hb-pt--5 { padding-top: 5rem; }
.hb-pt--5-5 { padding-top: 5.5rem; }
.hb-pt--6 { padding-top: 6rem; }
.hb-pt--6-5 { padding-top: 6.5rem; }
.hb-pt--7 { padding-top: 7rem; }
.hb-pt--7-5 { padding-top: 7.5rem; }
.hb-pt--8 { padding-top: 8rem; }
.hb-pt--8-5 { padding-top: 8.5rem; }
.hb-pt--9 { padding-top: 9rem; }
.hb-pt--9-5 { padding-top: 9.5rem; }
.hb-pt--10 { padding-top: 10rem; }

/* Padding Right */
.hb-pr--0 { padding-right: 0rem; }
.hb-pr--0-5 { padding-right: 0.5rem; }
.hb-pr--1 { padding-right: 1rem; }
.hb-pr--1-5 { padding-right: 1.5rem; }
.hb-pr--2 { padding-right: 2rem; }
.hb-pr--2-5 { padding-right: 2.5rem; }
.hb-pr--3 { padding-right: 3rem; }
.hb-pr--3-5 { padding-right: 3.5rem; }
.hb-pr--4 { padding-right: 4rem; }
.hb-pr--4-5 { padding-right: 4.5rem; }
.hb-pr--5 { padding-right: 5rem; }
.hb-pr--5-5 { padding-right: 5.5rem; }
.hb-pr--6 { padding-right: 6rem; }
.hb-pr--6-5 { padding-right: 6.5rem; }
.hb-pr--7 { padding-right: 7rem; }
.hb-pr--7-5 { padding-right: 7.5rem; }
.hb-pr--8 { padding-right: 8rem; }
.hb-pr--8-5 { padding-right: 8.5rem; }
.hb-pr--9 { padding-right: 9rem; }
.hb-pr--9-5 { padding-right: 9.5rem; }
.hb-pr--10 { padding-right: 10rem; }

/* Padding Bottom */
.hb-pb--0 { padding-bottom: 0rem; }
.hb-pb--0-5 { padding-bottom: 0.5rem; }
.hb-pb--1 { padding-bottom: 1rem; }
.hb-pb--1-5 { padding-bottom: 1.5rem; }
.hb-pb--2 { padding-bottom: 2rem; }
.hb-pb--2-5 { padding-bottom: 2.5rem; }
.hb-pb--3 { padding-bottom: 3rem; }
.hb-pb--3-5 { padding-bottom: 3.5rem; }
.hb-pb--4 { padding-bottom: 4rem; }
.hb-pb--4-5 { padding-bottom: 4.5rem; }
.hb-pb--5 { padding-bottom: 5rem; }
.hb-pb--5-5 { padding-bottom: 5.5rem; }
.hb-pb--6 { padding-bottom: 6rem; }
.hb-pb--6-5 { padding-bottom: 6.5rem; }
.hb-pb--7 { padding-bottom: 7rem; }
.hb-pb--7-5 { padding-bottom: 7.5rem; }
.hb-pb--8 { padding-bottom: 8rem; }
.hb-pb--8-5 { padding-bottom: 8.5rem; }
.hb-pb--9 { padding-bottom: 9rem; }
.hb-pb--9-5 { padding-bottom: 9.5rem; }
.hb-pb--10 { padding-bottom: 10rem; }

/* Padding Left */
.hb-pl--0 { padding-left: 0rem; }
.hb-pl--0-5 { padding-left: 0.5rem; }
.hb-pl--1 { padding-left: 1rem; }
.hb-pl--1-5 { padding-left: 1.5rem; }
.hb-pl--2 { padding-left: 2rem; }
.hb-pl--2-5 { padding-left: 2.5rem; }
.hb-pl--3 { padding-left: 3rem; }
.hb-pl--3-5 { padding-left: 3.5rem; }
.hb-pl--4 { padding-left: 4rem; }
.hb-pl--4-5 { padding-left: 4.5rem; }
.hb-pl--5 { padding-left: 5rem; }
.hb-pl--5-5 { padding-left: 5.5rem; }
.hb-pl--6 { padding-left: 6rem; }
.hb-pl--6-5 { padding-left: 6.5rem; }
.hb-pl--7 { padding-left: 7rem; }
.hb-pl--7-5 { padding-left: 7.5rem; }
.hb-pl--8 { padding-left: 8rem; }
.hb-pl--8-5 { padding-left: 8.5rem; }
.hb-pl--9 { padding-left: 9rem; }
.hb-pl--9-5 { padding-left: 9.5rem; }
.hb-pl--10 { padding-left: 10rem; }

/* Margin Inline */
.hb-mi--auto { margin-inline: auto; }
.hb-mi--0 { margin-inline: 0rem; }
.hb-mi--0-5 { margin-inline: 0.5rem; }
.hb-mi--1 { margin-inline: 1rem; }
.hb-mi--1-5 { margin-inline: 1.5rem; }
.hb-mi--2 { margin-inline: 2rem; }
.hb-mi--2-5 { margin-inline: 2.5rem; }
.hb-mi--3 { margin-inline: 3rem; }
.hb-mi--3-5 { margin-inline: 3.5rem; }
.hb-mi--4 { margin-inline: 4rem; }
.hb-mi--4-5 { margin-inline: 4.5rem; }
.hb-mi--5 { margin-inline: 5rem; }
.hb-mi--5-5 { margin-inline: 5.5rem; }
.hb-mi--6 { margin-inline: 6rem; }
.hb-mi--6-5 { margin-inline: 6.5rem; }
.hb-mi--7 { margin-inline: 7rem; }
.hb-mi--7-5 { margin-inline: 7.5rem; }
.hb-mi--8 { margin-inline: 8rem; }
.hb-mi--8-5 { margin-inline: 8.5rem; }
.hb-mi--9 { margin-inline: 9rem; }
.hb-mi--9-5 { margin-inline: 9.5rem; }
.hb-mi--10 { margin-inline: 10rem; }

/* Margin Block */
.hb-mbk--0 { margin-block: 0rem; }
.hb-mbk--0-5 { margin-block: 0.5rem; }
.hb-mbk--1 { margin-block: 1rem; }
.hb-mbk--1-5 { margin-block: 1.5rem; }
.hb-mbk--2 { margin-block: 2rem; }
.hb-mbk--2-5 { margin-block: 2.5rem; }
.hb-mbk--3 { margin-block: 3rem; }
.hb-mbk--3-5 { margin-block: 3.5rem; }
.hb-mbk--4 { margin-block: 4rem; }
.hb-mbk--4-5 { margin-block: 4.5rem; }
.hb-mbk--5 { margin-block: 5rem; }
.hb-mbk--5-5 { margin-block: 5.5rem; }
.hb-mbk--6 { margin-block: 6rem; }
.hb-mbk--6-5 { margin-block: 6.5rem; }
.hb-mbk--7 { margin-block: 7rem; }
.hb-mbk--7-5 { margin-block: 7.5rem; }
.hb-mbk--8 { margin-block: 8rem; }
.hb-mbk--8-5 { margin-block: 8.5rem; }
.hb-mbk--9 { margin-block: 9rem; }
.hb-mbk--9-5 { margin-block: 9.5rem; }
.hb-mbk--10 { margin-block: 10rem; }

/* Padding Inline */
.hb-pi--0 { padding-inline: 0rem; }
.hb-pi--0-5 { padding-inline: 0.5rem; }
.hb-pi--1 { padding-inline: 1rem; }
.hb-pi--1-5 { padding-inline: 1.5rem; }
.hb-pi--2 { padding-inline: 2rem; }
.hb-pi--2-5 { padding-inline: 2.5rem; }
.hb-pi--3 { padding-inline: 3rem; }
.hb-pi--3-5 { padding-inline: 3.5rem; }
.hb-pi--4 { padding-inline: 4rem; }
.hb-pi--4-5 { padding-inline: 4.5rem; }
.hb-pi--5 { padding-inline: 5rem; }
.hb-pi--5-5 { padding-inline: 5.5rem; }
.hb-pi--6 { padding-inline: 6rem; }
.hb-pi--6-5 { padding-inline: 6.5rem; }
.hb-pi--7 { padding-inline: 7rem; }
.hb-pi--7-5 { padding-inline: 7.5rem; }
.hb-pi--8 { padding-inline: 8rem; }
.hb-pi--8-5 { padding-inline: 8.5rem; }
.hb-pi--9 { padding-inline: 9rem; }
.hb-pi--9-5 { padding-inline: 9.5rem; }
.hb-pi--10 { padding-inline: 10rem; }

/* Padding Block */
.hb-pbk--0 { padding-block: 0rem; }
.hb-pbk--0-5 { padding-block: 0.5rem; }
.hb-pbk--1 { padding-block: 1rem; }
.hb-pbk--1-5 { padding-block: 1.5rem; }
.hb-pbk--2 { padding-block: 2rem; }
.hb-pbk--2-5 { padding-block: 2.5rem; }
.hb-pbk--3 { padding-block: 3rem; }
.hb-pbk--3-5 { padding-block: 3.5rem; }
.hb-pbk--4 { padding-block: 4rem; }
.hb-pbk--4-5 { padding-block: 4.5rem; }
.hb-pbk--5 { padding-block: 5rem; }
.hb-pbk--5-5 { padding-block: 5.5rem; }
.hb-pbk--6 { padding-block: 6rem; }
.hb-pbk--6-5 { padding-block: 6.5rem; }
.hb-pbk--7 { padding-block: 7rem; }
.hb-pbk--7-5 { padding-block: 7.5rem; }
.hb-pbk--8 { padding-block: 8rem; }
.hb-pbk--8-5 { padding-block: 8.5rem; }
.hb-pbk--9 { padding-block: 9rem; }
.hb-pbk--9-5 { padding-block: 9.5rem; }
.hb-pbk--10 { padding-block: 10rem; }


  
  /* -------------------
     RESPONSIVE TWEAKS
  -------------------- */
  @media only screen and (max-width: 768px) {
    .hb-grid,
    .hb-grid--2,
    .hb-grid--3,
    .hb-grid--4,
    .hb-grid--5,
    .hb-grid--6,
    .hb-grid--7,
    .hb-grid--8,
    .hb-grid--9,
    .hb-grid--10,
    .hb-grid--11,
    .hb-grid--12 {
      display: block !important;
    }
    
    .hb-grid--keep-mobile { display: grid !important; }
  
    .hb-flex { flex-direction: column; }
    .hb-flex--keep-mobile {
    display: flex !important;
    flex-direction: row !important; /* or default row */
    }
  
    .hb-columns--2,
    .hb-columns--3,
    .hb-columns--4 {
      column-count: 1;
    }
  }