/* -------------------
   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; }

/* Column span utilities */
.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; }

/* Row span utilities */
.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; }

/* Auto-flow */
.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: 0.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; }

/* Column-gap (inline axis) */
.hb-grid__col-gap--0   { column-gap: 0rem; }
.hb-grid__col-gap--0_5 { column-gap: 0.5rem; }
.hb-grid__col-gap--1   { column-gap: 1rem; }
.hb-grid__col-gap--2   { column-gap: 2rem; }
.hb-grid__col-gap--3   { column-gap: 3rem; }
.hb-grid__col-gap--4   { column-gap: 4rem; }
.hb-grid__col-gap--5   { column-gap: 5rem; }
.hb-grid__col-gap--6   { column-gap: 6rem; }
.hb-grid__col-gap--8   { column-gap: 8rem; }
.hb-grid__col-gap--10  { column-gap: 10rem; }
.hb-grid__col-gap--12  { column-gap: 12rem; }

/* Row-gap (block axis) */
.hb-grid__row-gap--0   { row-gap: 0rem; }
.hb-grid__row-gap--0_5 { row-gap: 0.5rem; }
.hb-grid__row-gap--1   { row-gap: 1rem; }
.hb-grid__row-gap--2   { row-gap: 2rem; }
.hb-grid__row-gap--3   { row-gap: 3rem; }
.hb-grid__row-gap--4   { row-gap: 4rem; }
.hb-grid__row-gap--5   { row-gap: 5rem; }
.hb-grid__row-gap--6   { row-gap: 6rem; }
.hb-grid__row-gap--8   { row-gap: 8rem; }
.hb-grid__row-gap--10  { row-gap: 10rem; }
.hb-grid__row-gap--12  { row-gap: 12rem; }

/* Place utilities (grid only) */
.hb-grid__place-items--start   { place-items: start; }
.hb-grid__place-items--center  { place-items: center; }
.hb-grid__place-items--end     { place-items: end; }
.hb-grid__place-items--stretch { place-items: stretch; }

.hb-grid__place-content--start   { place-content: start; }
.hb-grid__place-content--center  { place-content: center; }
.hb-grid__place-content--end     { place-content: end; }
.hb-grid__place-content--between { place-content: space-between; }
.hb-grid__place-content--around  { place-content: space-around; }
.hb-grid__place-content--evenly  { place-content: space-evenly; }


/* -------------------
   FLEXBOX UTILITIES
-------------------- */
.hb-flex {
  display: flex;
}

/* Flex wrap */
.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; }

/* Flex item sizing */
.hb-flex__item--1    { flex: 1 1 auto; }
.hb-flex__item--none { flex: none; }
.hb-flex__item--auto { flex: 0 1 auto; }
.hb-flex__grow       { flex-grow: 1; }
.hb-flex__grow--0    { flex-grow: 0; }
.hb-flex__shrink     { flex-shrink: 1; }
.hb-flex__shrink--0  { flex-shrink: 0; }

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

/* Flex gap utilities */
.hb-flex__gap--0   { gap: 0rem; }
.hb-flex__gap--0_5 { gap: 0.5rem; }
.hb-flex__gap--1   { gap: 1rem; }
.hb-flex__gap--2   { gap: 2rem; }
.hb-flex__gap--3   { gap: 3rem; }
.hb-flex__gap--4   { gap: 4rem; }
.hb-flex__gap--5   { gap: 5rem; }
.hb-flex__gap--6   { gap: 6rem; }
.hb-flex__gap--7   { gap: 7rem; }
.hb-flex__gap--8   { gap: 8rem; }
.hb-flex__gap--9   { gap: 9rem; }
.hb-flex__gap--10  { gap: 10rem; }
.hb-flex__gap--11  { gap: 11rem; }
.hb-flex__gap--12  { gap: 12rem; }

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

/* Align self */
.hb-align-self--start   { align-self: start; }
.hb-align-self--center  { align-self: center; }
.hb-align-self--end     { align-self: end; }
.hb-align-self--stretch { align-self: stretch; }

/* Justify content */
.hb-flex__justify--start   { justify-content: start; }
.hb-flex__justify--center  { justify-content: center; }
.hb-flex__justify--end     { justify-content: 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; }


/* -------------------
   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
   Naming convention — logical axes:
     m/p  = all sides
     mi   = margin-inline         (left + right)
     mb   = margin-block          (top + bottom)
     mis  = margin-inline-start   (left in ltr)
     mie  = margin-inline-end     (right in ltr)
     mbs  = margin-block-start    (top)
     mbe  = margin-block-end      (bottom)
     pi   = padding-inline        (left + right)
     pb   = padding-block         (top + bottom)
     pis  = padding-inline-start  (left in ltr)
     pie  = padding-inline-end    (right in ltr)
     pbs  = padding-block-start   (top)
     pbe  = padding-block-end     (bottom)
-------------------- */

/* Margin — all sides */
.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 — all sides */
.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 Inline (left + right) */
.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 (top + bottom) */
.hb-mb--0    { margin-block: 0rem; }
.hb-mb--0-5  { margin-block: 0.5rem; }
.hb-mb--1    { margin-block: 1rem; }
.hb-mb--1-5  { margin-block: 1.5rem; }
.hb-mb--2    { margin-block: 2rem; }
.hb-mb--2-5  { margin-block: 2.5rem; }
.hb-mb--3    { margin-block: 3rem; }
.hb-mb--3-5  { margin-block: 3.5rem; }
.hb-mb--4    { margin-block: 4rem; }
.hb-mb--4-5  { margin-block: 4.5rem; }
.hb-mb--5    { margin-block: 5rem; }
.hb-mb--5-5  { margin-block: 5.5rem; }
.hb-mb--6    { margin-block: 6rem; }
.hb-mb--6-5  { margin-block: 6.5rem; }
.hb-mb--7    { margin-block: 7rem; }
.hb-mb--7-5  { margin-block: 7.5rem; }
.hb-mb--8    { margin-block: 8rem; }
.hb-mb--8-5  { margin-block: 8.5rem; }
.hb-mb--9    { margin-block: 9rem; }
.hb-mb--9-5  { margin-block: 9.5rem; }
.hb-mb--10   { margin-block: 10rem; }

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

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

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

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

/* Padding Inline (left + right) */
.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 (top + bottom) */
.hb-pb--0    { padding-block: 0rem; }
.hb-pb--0-5  { padding-block: 0.5rem; }
.hb-pb--1    { padding-block: 1rem; }
.hb-pb--1-5  { padding-block: 1.5rem; }
.hb-pb--2    { padding-block: 2rem; }
.hb-pb--2-5  { padding-block: 2.5rem; }
.hb-pb--3    { padding-block: 3rem; }
.hb-pb--3-5  { padding-block: 3.5rem; }
.hb-pb--4    { padding-block: 4rem; }
.hb-pb--4-5  { padding-block: 4.5rem; }
.hb-pb--5    { padding-block: 5rem; }
.hb-pb--5-5  { padding-block: 5.5rem; }
.hb-pb--6    { padding-block: 6rem; }
.hb-pb--6-5  { padding-block: 6.5rem; }
.hb-pb--7    { padding-block: 7rem; }
.hb-pb--7-5  { padding-block: 7.5rem; }
.hb-pb--8    { padding-block: 8rem; }
.hb-pb--8-5  { padding-block: 8.5rem; }
.hb-pb--9    { padding-block: 9rem; }
.hb-pb--9-5  { padding-block: 9.5rem; }
.hb-pb--10   { padding-block: 10rem; }

/* Padding Inline Start (left in ltr) */
.hb-pis--0    { padding-inline-start: 0rem; }
.hb-pis--0-5  { padding-inline-start: 0.5rem; }
.hb-pis--1    { padding-inline-start: 1rem; }
.hb-pis--1-5  { padding-inline-start: 1.5rem; }
.hb-pis--2    { padding-inline-start: 2rem; }
.hb-pis--2-5  { padding-inline-start: 2.5rem; }
.hb-pis--3    { padding-inline-start: 3rem; }
.hb-pis--3-5  { padding-inline-start: 3.5rem; }
.hb-pis--4    { padding-inline-start: 4rem; }
.hb-pis--4-5  { padding-inline-start: 4.5rem; }
.hb-pis--5    { padding-inline-start: 5rem; }
.hb-pis--5-5  { padding-inline-start: 5.5rem; }
.hb-pis--6    { padding-inline-start: 6rem; }
.hb-pis--6-5  { padding-inline-start: 6.5rem; }
.hb-pis--7    { padding-inline-start: 7rem; }
.hb-pis--7-5  { padding-inline-start: 7.5rem; }
.hb-pis--8    { padding-inline-start: 8rem; }
.hb-pis--8-5  { padding-inline-start: 8.5rem; }
.hb-pis--9    { padding-inline-start: 9rem; }
.hb-pis--9-5  { padding-inline-start: 9.5rem; }
.hb-pis--10   { padding-inline-start: 10rem; }

/* Padding Inline End (right in ltr) */
.hb-pie--0    { padding-inline-end: 0rem; }
.hb-pie--0-5  { padding-inline-end: 0.5rem; }
.hb-pie--1    { padding-inline-end: 1rem; }
.hb-pie--1-5  { padding-inline-end: 1.5rem; }
.hb-pie--2    { padding-inline-end: 2rem; }
.hb-pie--2-5  { padding-inline-end: 2.5rem; }
.hb-pie--3    { padding-inline-end: 3rem; }
.hb-pie--3-5  { padding-inline-end: 3.5rem; }
.hb-pie--4    { padding-inline-end: 4rem; }
.hb-pie--4-5  { padding-inline-end: 4.5rem; }
.hb-pie--5    { padding-inline-end: 5rem; }
.hb-pie--5-5  { padding-inline-end: 5.5rem; }
.hb-pie--6    { padding-inline-end: 6rem; }
.hb-pie--6-5  { padding-inline-end: 6.5rem; }
.hb-pie--7    { padding-inline-end: 7rem; }
.hb-pie--7-5  { padding-inline-end: 7.5rem; }
.hb-pie--8    { padding-inline-end: 8rem; }
.hb-pie--8-5  { padding-inline-end: 8.5rem; }
.hb-pie--9    { padding-inline-end: 9rem; }
.hb-pie--9-5  { padding-inline-end: 9.5rem; }
.hb-pie--10   { padding-inline-end: 10rem; }

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

/* Padding Block End (bottom) */
.hb-pbe--0    { padding-block-end: 0rem; }
.hb-pbe--0-5  { padding-block-end: 0.5rem; }
.hb-pbe--1    { padding-block-end: 1rem; }
.hb-pbe--1-5  { padding-block-end: 1.5rem; }
.hb-pbe--2    { padding-block-end: 2rem; }
.hb-pbe--2-5  { padding-block-end: 2.5rem; }
.hb-pbe--3    { padding-block-end: 3rem; }
.hb-pbe--3-5  { padding-block-end: 3.5rem; }
.hb-pbe--4    { padding-block-end: 4rem; }
.hb-pbe--4-5  { padding-block-end: 4.5rem; }
.hb-pbe--5    { padding-block-end: 5rem; }
.hb-pbe--5-5  { padding-block-end: 5.5rem; }
.hb-pbe--6    { padding-block-end: 6rem; }
.hb-pbe--6-5  { padding-block-end: 6.5rem; }
.hb-pbe--7    { padding-block-end: 7rem; }
.hb-pbe--7-5  { padding-block-end: 7.5rem; }
.hb-pbe--8    { padding-block-end: 8rem; }
.hb-pbe--8-5  { padding-block-end: 8.5rem; }
.hb-pbe--9    { padding-block-end: 9rem; }
.hb-pbe--9-5  { padding-block-end: 9.5rem; }
.hb-pbe--10   { padding-block-end: 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;
  }

  .hb-columns--2,
  .hb-columns--3,
  .hb-columns--4 {
    column-count: 1;
  }
}