:root {
	--space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-72: 72px;
    --space-80: 80px;
}

/* Padding all */
.p-4 {padding: var(--space-4);}
.p-8 {padding: var(--space-8);}
.p-12 {padding: var(--space-12);}
.p-16 {padding: var(--space-16);}
.p-24 {padding: var(--space-24);}
.p-32 {padding: var(--space-32);}
.p-40 {padding: var(--space-40);}
.p-48 {padding: var(--space-48);}
.p-56 {padding: var(--space-56);}
.p-64 {padding: var(--space-64);}
.p-72 {padding: var(--space-72);}
.p-80 {padding: var(--space-80);}

/* Padding Y */
.py-4 {padding-top: var(--space-4); padding-bottom: var(--space-4);}
.py-8 {padding-top: var(--space-8); padding-bottom: var(--space-8);}
.py-12 {padding-top: var(--space-12); padding-bottom: var(--space-12);}
.py-16 {padding-top: var(--space-16); padding-bottom: var(--space-16);}
.py-24 {padding-top: var(--space-24); padding-bottom: var(--space-24);}
.py-32 {padding-top: var(--space-32); padding-bottom: var(--space-32);}
.py-40 {padding-top: var(--space-40); padding-bottom: var(--space-40);}
.py-48 {padding-top: var(--space-48); padding-bottom: var(--space-48);}
.py-56 {padding-top: var(--space-56); padding-bottom: var(--space-56);}
.py-64 {padding-top: var(--space-64); padding-bottom: var(--space-64);}
.py-72 {padding-top: var(--space-72); padding-bottom: var(--space-72);}
.py-80 {padding-top: var(--space-80); padding-bottom: var(--space-80);}

/* Padding X */
.px-4 {padding-left: var(--space-4); padding-right: var(--space-4);}
.px-8 {padding-left: var(--space-8); padding-right: var(--space-8);}
.px-12 {padding-left: var(--space-12); padding-right: var(--space-12);}
.px-16 {padding-left: var(--space-16); padding-right: var(--space-16);}
.px-24 {padding-left: var(--space-24); padding-right: var(--space-24);}
.px-32 {padding-left: var(--space-32); padding-right: var(--space-32);}
.px-40 {padding-left: var(--space-40); padding-right: var(--space-40);}
.px-48 {padding-left: var(--space-48); padding-right: var(--space-48);}
.px-56 {padding-left: var(--space-56); padding-right: var(--space-56);}
.px-64 {padding-left: var(--space-64); padding-right: var(--space-64);}
.px-72 {padding-left: var(--space-72); padding-right: var(--space-72);}
.px-80 {padding-left: var(--space-80); padding-right: var(--space-80);}

/* Padding top */
.pt-4 {padding-top: var(--space-4);}
.pt-8 {padding-top: var(--space-8);}
.pt-12 {padding-top: var(--space-12);}
.pt-16 {padding-top: var(--space-16);}
.pt-24 {padding-top: var(--space-24);}
.pt-32 {padding-top: var(--space-32);}
.pt-40 {padding-top: var(--space-40);}
.pt-48 {padding-top: var(--space-48);}
.pt-56 {padding-top: var(--space-56);}
.pt-64 {padding-top: var(--space-64);}
.pt-72 {padding-top: var(--space-72);}
.pt-80 {padding-top: var(--space-80);}

/* Padding bottom */
.pb-4 {padding-bottom: var(--space-4);}
.pb-8 {padding-bottom: var(--space-8);}
.pb-12 {padding-bottom: var(--space-12);}
.pb-16 {padding-bottom: var(--space-16);}
.pb-24 {padding-bottom: var(--space-24);}
.pb-32 {padding-bottom: var(--space-32);}
.pb-40 {padding-bottom: var(--space-40);}
.pb-48 {padding-bottom: var(--space-48);}
.pb-56 {padding-bottom: var(--space-56);}
.pb-64 {padding-bottom: var(--space-64);}
.pb-72 {padding-bottom: var(--space-72);}
.pb-80 {padding-bottom: var(--space-80);}

/* Padding start (left) */
.ps-4 {padding-left: var(--space-4);}
.ps-8 {padding-left: var(--space-8);}
.ps-12 {padding-left: var(--space-12);}
.ps-16 {padding-left: var(--space-16);}
.ps-24 {padding-left: var(--space-24);}
.ps-32 {padding-left: var(--space-32);}
.ps-40 {padding-left: var(--space-40);}
.ps-48 {padding-left: var(--space-48);}
.ps-56 {padding-left: var(--space-56);}
.ps-64 {padding-left: var(--space-64);}
.ps-72 {padding-left: var(--space-72);}
.ps-80 {padding-left: var(--space-80);}

/* Padding end (right) */
.pe-4 {padding-right: var(--space-4);}
.pe-8 {padding-right: var(--space-8);}
.pe-12 {padding-right: var(--space-12);}
.pe-16 {padding-right: var(--space-16);}
.pe-24 {padding-right: var(--space-24);}
.pe-32 {padding-right: var(--space-32);}
.pe-40 {padding-right: var(--space-40);}
.pe-48 {padding-right: var(--space-48);}
.pe-56 {padding-right: var(--space-56);}
.pe-64 {padding-right: var(--space-64);}
.pe-72 {padding-right: var(--space-72);}
.pe-80 {padding-right: var(--space-80);}

/* Margin all */
.m-4 {margin: var(--space-4);}
.m-8 {margin: var(--space-8);}
.m-12 {margin: var(--space-12);}
.m-16 {margin: var(--space-16);}
.m-24 {margin: var(--space-24);}
.m-32 {margin: var(--space-32);}
.m-40 {margin: var(--space-40);}
.m-48 {margin: var(--space-48);}
.m-56 {margin: var(--space-56);}
.m-64 {margin: var(--space-64);}
.m-72 {margin: var(--space-72);}
.m-80 {margin: var(--space-80);}

/* Margin Y */
.my-4 {margin-top: var(--space-4); margin-bottom: var(--space-4);}
.my-8 {margin-top: var(--space-8); margin-bottom: var(--space-8);}
.my-12 {margin-top: var(--space-12); margin-bottom: var(--space-12);}
.my-16 {margin-top: var(--space-16); margin-bottom: var(--space-16);}
.my-24 {margin-top: var(--space-24); margin-bottom: var(--space-24);}
.my-32 {margin-top: var(--space-32); margin-bottom: var(--space-32);}
.my-40 {margin-top: var(--space-40); margin-bottom: var(--space-40);}
.my-48 {margin-top: var(--space-48); margin-bottom: var(--space-48);}
.my-56 {margin-top: var(--space-56); margin-bottom: var(--space-56);}
.my-64 {margin-top: var(--space-64); margin-bottom: var(--space-64);}
.my-72 {margin-top: var(--space-72); margin-bottom: var(--space-72);}
.my-80 {margin-top: var(--space-80); margin-bottom: var(--space-80);}

/* Margin X */
.mx-4 {margin-left: var(--space-4); margin-right: var(--space-4);}
.mx-8 {margin-left: var(--space-8); margin-right: var(--space-8);}
.mx-12 {margin-left: var(--space-12); margin-right: var(--space-12);}
.mx-16 {margin-left: var(--space-16); margin-right: var(--space-16);}
.mx-24 {margin-left: var(--space-24); margin-right: var(--space-24);}
.mx-32 {margin-left: var(--space-32); margin-right: var(--space-32);}
.mx-40 {margin-left: var(--space-40); margin-right: var(--space-40);}
.mx-48 {margin-left: var(--space-48); margin-right: var(--space-48);}
.mx-56 {margin-left: var(--space-56); margin-right: var(--space-56);}
.mx-64 {margin-left: var(--space-64); margin-right: var(--space-64);}
.mx-72 {margin-left: var(--space-72); margin-right: var(--space-72);}
.mx-80 {margin-left: var(--space-80); margin-right: var(--space-80);}

/* Margin top */
.mt-4 {margin-top: var(--space-4);}
.mt-8 {margin-top: var(--space-8);}
.mt-12 {margin-top: var(--space-12);}
.mt-16 {margin-top: var(--space-16);}
.mt-24 {margin-top: var(--space-24);}
.mt-32 {margin-top: var(--space-32);}
.mt-40 {margin-top: var(--space-40);}
.mt-48 {margin-top: var(--space-48);}
.mt-56 {margin-top: var(--space-56);}
.mt-64 {margin-top: var(--space-64);}
.mt-72 {margin-top: var(--space-72);}
.mt-80 {margin-top: var(--space-80);}

/* Margin bottom */
.mb-4 {margin-bottom: var(--space-4);}
.mb-8 {margin-bottom: var(--space-8);}
.mb-12 {margin-bottom: var(--space-12);}
.mb-16 {margin-bottom: var(--space-16);}
.mb-24 {margin-bottom: var(--space-24);}
.mb-32 {margin-bottom: var(--space-32);}
.mb-40 {margin-bottom: var(--space-40);}
.mb-48 {margin-bottom: var(--space-48);}
.mb-56 {margin-bottom: var(--space-56);}
.mb-64 {margin-bottom: var(--space-64);}
.mb-72 {margin-bottom: var(--space-72);}
.mb-80 {margin-bottom: var(--space-80);}

/* Margin start (left) */
.ms-4 {margin-left: var(--space-4);}
.ms-8 {margin-left: var(--space-8);}
.ms-12 {margin-left: var(--space-12);}
.ms-16 {margin-left: var(--space-16);}
.ms-24 {margin-left: var(--space-24);}
.ms-32 {margin-left: var(--space-32);}
.ms-40 {margin-left: var(--space-40);}
.ms-48 {margin-left: var(--space-48);}
.ms-56 {margin-left: var(--space-56);}
.ms-64 {margin-left: var(--space-64);}
.ms-72 {margin-left: var(--space-72);}
.ms-80 {margin-left: var(--space-80);}

/* Margin end (right) */
.me-4 {margin-right: var(--space-4);}
.me-12 {margin-right: var(--space-12);}
.me-16 {margin-right: var(--space-16);}
.me-24 {margin-right: var(--space-24);}
.me-32 {margin-right: var(--space-32);}
.me-40 {margin-right: var(--space-40);}
.me-48 {margin-right: var(--space-48);}
.me-56 {margin-right: var(--space-56);}
.me-64 {margin-right: var(--space-64);}
.me-72 {margin-right: var(--space-72);}
.me-80 {margin-right: var(--space-80);}

/* ============================= */
/* Padding X/Y + Margin X/Y Responsive */
/* Tablet ≥768px */
@media (min-width: 768px) {
  .px-md-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-md-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-md-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
  .px-md-16 { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
  .px-md-24 { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }
  .px-md-32 { padding-left: var(--space-32) !important; padding-right: var(--space-32) !important; }
  .px-md-40 { padding-left: var(--space-40) !important; padding-right: var(--space-40) !important; }
  .px-md-48 { padding-left: var(--space-48) !important; padding-right: var(--space-48) !important; }
  .px-md-56 { padding-left: var(--space-56) !important; padding-right: var(--space-56) !important; }
  .px-md-64 { padding-left: var(--space-64) !important; padding-right: var(--space-64) !important; }
  .px-md-72 { padding-left: var(--space-72) !important; padding-right: var(--space-72) !important; }
  .px-md-80 { padding-left: var(--space-80) !important; padding-right: var(--space-80) !important; }

  .py-md-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-md-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-md-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
  .py-md-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
  .py-md-24 { padding-top: var(--space-24) !important; padding-bottom: var(--space-24) !important; }
  .py-md-32 { padding-top: var(--space-32) !important; padding-bottom: var(--space-32) !important; }
  .py-md-40 { padding-top: var(--space-40) !important; padding-bottom: var(--space-40) !important; }
  .py-md-48 { padding-top: var(--space-48) !important; padding-bottom: var(--space-48) !important; }
  .py-md-56 { padding-top: var(--space-56) !important; padding-bottom: var(--space-56) !important; }
  .py-md-64 { padding-top: var(--space-64) !important; padding-bottom: var(--space-64) !important; }
  .py-md-72 { padding-top: var(--space-72) !important; padding-bottom: var(--space-72) !important; }
  .py-md-80 { padding-top: var(--space-80) !important; padding-bottom: var(--space-80) !important; }

  .mx-md-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .mx-md-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
  .mx-md-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
  .mx-md-16 { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
  .mx-md-24 { margin-left: var(--space-24) !important; margin-right: var(--space-24) !important; }
  .mx-md-32 { margin-left: var(--space-32) !important; margin-right: var(--space-32) !important; }
  .mx-md-40 { margin-left: var(--space-40) !important; margin-right: var(--space-40) !important; }
  .mx-md-48 { margin-left: var(--space-48) !important; margin-right: var(--space-48) !important; }
  .mx-md-56 { margin-left: var(--space-56) !important; margin-right: var(--space-56) !important; }
  .mx-md-64 { margin-left: var(--space-64) !important; margin-right: var(--space-64) !important; }
  .mx-md-72 { margin-left: var(--space-72) !important; margin-right: var(--space-72) !important; }
  .mx-md-80 { margin-left: var(--space-80) !important; margin-right: var(--space-80) !important; }

  .my-md-4 { margin-top: var(--space 4) !important; margin-bottom: var(--space-4) !important; }
  .my-md-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
  .my-md-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
  .my-md-16 { margin-top: var(--space-16) !important; margin-bottom: var(--space-16) !important; }
  .my-md-24 { margin-top: var(--space-24) !important; margin-bottom: var(--space-24) !important; }
  .my-md-32 { margin-top: var(--space-32) !important; margin-bottom: var(--space-32) !important; }
  .my-md-40 { margin-top: var(--space-40) !important; margin-bottom: var(--space-40) !important; }
  .my-md-48 { margin-top: var(--space-48) !important; margin-bottom: var(--space-48) !important; }
  .my-md-56 { margin-top: var(--space-56) !important; margin-bottom: var(--space-56) !important; }
  .my-md-64 { margin-top: var(--space-64) !important; margin-bottom: var(--space-64) !important; }
  .my-md-72 { margin-top: var(--space-72) !important; margin-bottom: var(--space-72) !important; }
  .my-md-80 { margin-top: var(--space-80) !important; margin-bottom: var(--space-80) !important; }
}

/* Desktop ≥1200px */
@media (min-width: 1200px) {
  .px-lg-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-lg-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-lg-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
  .px-lg-16 { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
  .px-lg-24 { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }
  .px-lg-32 { padding-left: var(--space-32) !important; padding-right: var(--space-32) !important; }
  .px-lg-40 { padding-left: var(--space-40) !important; padding-right: var(--space-40) !important; }
  .px-lg-48 { padding-left: var(--space-48) !important; padding-right: var(--space-48) !important; }
  .px-lg-56 { padding-left: var(--space-56) !important; padding-right: var(--space-56) !important; }
  .px-lg-64 { padding-left: var(--space-64) !important; padding-right: var(--space-64) !important; }
  .px-lg-72 { padding-left: var(--space-72) !important; padding-right: var(--space-72) !important; }
  .px-lg-80 { padding-left: var(--space-80) !important; padding-right: var(--space-80) !important; }

  .py-lg-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-lg-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-lg-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
  .py-lg-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
  .py-lg-24 { padding-top: var(--space-24) !important; padding-bottom: var(--space-24) !important; }
  .py-lg-32 { padding-top: var(--space-32) !important; padding-bottom: var(--space-32) !important; }
  .py-lg-40 { padding-top: var(--space-40) !important; padding-bottom: var(--space-40) !important; }
  .py-lg-48 { padding-top: var(--space-48) !important; padding-bottom: var(--space-48) !important; }
  .py-lg-56 { padding-top: var(--space-56) !important; padding-bottom: var(--space-56) !important; }
  .py-lg-64 { padding-top: var(--space-64) !important; padding-bottom: var(--space-64) !important; }
  .py-lg-72 { padding-top: var(--space-72) !important; padding-bottom: var(--space-72) !important; }
  .py-lg-80 { padding-top: var(--space-80) !important; padding-bottom: var(--space-80) !important; }

  .mx-lg-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .mx-lg-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
  .mx-lg-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
  .mx-lg-16 { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
  .mx-lg-24 { margin-left: var(--space-24) !important; margin-right: var(--space-24) !important; }
  .mx-lg-32 { margin-left: var(--space-32) !important; margin-right: var(--space-32) !important; }
  .mx-lg-40 { margin-left: var(--space-40) !important; margin-right: var(--space-40) !important; }
  .mx-lg-48 { margin-left: var(--space-48) !important; margin-right: var(--space-48) !important; }
  .mx-lg-56 { margin-left: var(--space-56) !important; margin-right: var(--space-56) !important; }
  .mx-lg-64 { margin-left: var(--space-64) !important; margin-right: var(--space-64) !important; }
  .mx-lg-72 { margin-left: var(--space-72) !important; margin-right: var(--space-72) !important; }
  .mx-lg-80 { margin-left: var(--space-80) !important; margin-right: var(--space-80) !important; }

  .my-lg-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .my-lg-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
  .my-lg-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
  .my-lg-16 { margin-top: var(--space-16) !important; margin-bottom: var(--space-16) !important; }
  .my-lg-24 { margin-top: var(--space-24) !important; margin-bottom: var(--space-24) !important; }
  .my-lg-32 { margin-top: var(--space-32) !important; margin-bottom: var(--space-32) !important; }
  .my-lg-40 { margin-top: var(--space-40) !important; margin-bottom: var(--space-40) !important; }
  .my-lg-48 { margin-top: var(--space-48) !important; margin-bottom: var(--space-48) !important; }
  .my-lg-56 { margin-top: var(--space-56) !important; margin-bottom: var(--space-56) !important; }
  .my-lg-64 { margin-top: var(--space-64) !important; margin-bottom: var(--space-64) !important; }
  .my-lg-72 { margin-top: var(--space-72) !important; margin-bottom: var(--space-72) !important; }
  .my-lg-80 { margin-top: var(--space-80) !important; margin-bottom: var(--space-80) !important; }
}

.gap-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    align-items: flex-start;
}