Spacing Scale Calculator

Configuration

Spacing Preview

Scale Values

:root {
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0.5: 0.1250rem;
  --spacing-1: 0.1875rem;
  --spacing-1.5: 0.2500rem;
  --spacing-2: 0.3750rem;
  --spacing-2.5: 0.5000rem;
  --spacing-3: 0.6250rem;
  --spacing-3.5: 0.7500rem;
  --spacing-4: 1.0000rem;
  --spacing-5: 1.2500rem;
  --spacing-6: 1.5000rem;
  --spacing-8: 2.0000rem;
  --spacing-10: 2.5000rem;
  --spacing-12: 3.0000rem;
  --spacing-16: 4.0000rem;
  --spacing-20: 5.0000rem;
  --spacing-24: 6.0000rem;
  --spacing-32: 8.0000rem;
  --spacing-40: 10.0000rem;
  --spacing-48: 12.0000rem;
  --spacing-56: 14.0000rem;
  --spacing-64: 16.0000rem;
}

/* Margin utilities */
.m-0 { margin: var(--spacing-0); }
.mt-0 { margin-top: var(--spacing-0); }
.mr-0 { margin-right: var(--spacing-0); }
.mb-0 { margin-bottom: var(--spacing-0); }
.ml-0 { margin-left: var(--spacing-0); }
.mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }
.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }

.m-px { margin: var(--spacing-px); }
.mt-px { margin-top: var(--spacing-px); }
.mr-px { margin-right: var(--spacing-px); }
.mb-px { margin-bottom: var(--spacing-px); }
.ml-px { margin-left: var(--spacing-px); }
.mx-px { margin-left: var(--spacing-px); margin-right: var(--spacing-px); }
.my-px { margin-top: var(--spacing-px); margin-bottom: var(--spacing-px); }

.m-0.5 { margin: var(--spacing-0.5); }
.mt-0.5 { margin-top: var(--spacing-0.5); }
.mr-0.5 { margin-right: var(--spacing-0.5); }
.mb-0.5 { margin-bottom: var(--spacing-0.5); }
.ml-0.5 { margin-left: var(--spacing-0.5); }
.mx-0.5 { margin-left: var(--spacing-0.5); margin-right: var(--spacing-0.5); }
.my-0.5 { margin-top: var(--spacing-0.5); margin-bottom: var(--spacing-0.5); }

.m-1 { margin: var(--spacing-1); }
.mt-1 { margin-top: var(--spacing-1); }
.mr-1 { margin-right: var(--spacing-1); }
.mb-1 { margin-bottom: var(--spacing-1); }
.ml-1 { margin-left: var(--spacing-1); }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }

.m-1.5 { margin: var(--spacing-1.5); }
.mt-1.5 { margin-top: var(--spacing-1.5); }
.mr-1.5 { margin-right: var(--spacing-1.5); }
.mb-1.5 { margin-bottom: var(--spacing-1.5); }
.ml-1.5 { margin-left: var(--spacing-1.5); }
.mx-1.5 { margin-left: var(--spacing-1.5); margin-right: var(--spacing-1.5); }
.my-1.5 { margin-top: var(--spacing-1.5); margin-bottom: var(--spacing-1.5); }

.m-2 { margin: var(--spacing-2); }
.mt-2 { margin-top: var(--spacing-2); }
.mr-2 { margin-right: var(--spacing-2); }
.mb-2 { margin-bottom: var(--spacing-2); }
.ml-2 { margin-left: var(--spacing-2); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }

.m-2.5 { margin: var(--spacing-2.5); }
.mt-2.5 { margin-top: var(--spacing-2.5); }
.mr-2.5 { margin-right: var(--spacing-2.5); }
.mb-2.5 { margin-bottom: var(--spacing-2.5); }
.ml-2.5 { margin-left: var(--spacing-2.5); }
.mx-2.5 { margin-left: var(--spacing-2.5); margin-right: var(--spacing-2.5); }
.my-2.5 { margin-top: var(--spacing-2.5); margin-bottom: var(--spacing-2.5); }

.m-3 { margin: var(--spacing-3); }
.mt-3 { margin-top: var(--spacing-3); }
.mr-3 { margin-right: var(--spacing-3); }
.mb-3 { margin-bottom: var(--spacing-3); }
.ml-3 { margin-left: var(--spacing-3); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }

.m-3.5 { margin: var(--spacing-3.5); }
.mt-3.5 { margin-top: var(--spacing-3.5); }
.mr-3.5 { margin-right: var(--spacing-3.5); }
.mb-3.5 { margin-bottom: var(--spacing-3.5); }
.ml-3.5 { margin-left: var(--spacing-3.5); }
.mx-3.5 { margin-left: var(--spacing-3.5); margin-right: var(--spacing-3.5); }
.my-3.5 { margin-top: var(--spacing-3.5); margin-bottom: var(--spacing-3.5); }

.m-4 { margin: var(--spacing-4); }
.mt-4 { margin-top: var(--spacing-4); }
.mr-4 { margin-right: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4); }
.ml-4 { margin-left: var(--spacing-4); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }

.m-5 { margin: var(--spacing-5); }
.mt-5 { margin-top: var(--spacing-5); }
.mr-5 { margin-right: var(--spacing-5); }
.mb-5 { margin-bottom: var(--spacing-5); }
.ml-5 { margin-left: var(--spacing-5); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }

.m-6 { margin: var(--spacing-6); }
.mt-6 { margin-top: var(--spacing-6); }
.mr-6 { margin-right: var(--spacing-6); }
.mb-6 { margin-bottom: var(--spacing-6); }
.ml-6 { margin-left: var(--spacing-6); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }

.m-8 { margin: var(--spacing-8); }
.mt-8 { margin-top: var(--spacing-8); }
.mr-8 { margin-right: var(--spacing-8); }
.mb-8 { margin-bottom: var(--spacing-8); }
.ml-8 { margin-left: var(--spacing-8); }
.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }

.m-10 { margin: var(--spacing-10); }
.mt-10 { margin-top: var(--spacing-10); }
.mr-10 { margin-right: var(--spacing-10); }
.mb-10 { margin-bottom: var(--spacing-10); }
.ml-10 { margin-left: var(--spacing-10); }
.mx-10 { margin-left: var(--spacing-10); margin-right: var(--spacing-10); }
.my-10 { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }

.m-12 { margin: var(--spacing-12); }
.mt-12 { margin-top: var(--spacing-12); }
.mr-12 { margin-right: var(--spacing-12); }
.mb-12 { margin-bottom: var(--spacing-12); }
.ml-12 { margin-left: var(--spacing-12); }
.mx-12 { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }
.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }

.m-16 { margin: var(--spacing-16); }
.mt-16 { margin-top: var(--spacing-16); }
.mr-16 { margin-right: var(--spacing-16); }
.mb-16 { margin-bottom: var(--spacing-16); }
.ml-16 { margin-left: var(--spacing-16); }
.mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }

.m-20 { margin: var(--spacing-20); }
.mt-20 { margin-top: var(--spacing-20); }
.mr-20 { margin-right: var(--spacing-20); }
.mb-20 { margin-bottom: var(--spacing-20); }
.ml-20 { margin-left: var(--spacing-20); }
.mx-20 { margin-left: var(--spacing-20); margin-right: var(--spacing-20); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }

.m-24 { margin: var(--spacing-24); }
.mt-24 { margin-top: var(--spacing-24); }
.mr-24 { margin-right: var(--spacing-24); }
.mb-24 { margin-bottom: var(--spacing-24); }
.ml-24 { margin-left: var(--spacing-24); }
.mx-24 { margin-left: var(--spacing-24); margin-right: var(--spacing-24); }
.my-24 { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }

.m-32 { margin: var(--spacing-32); }
.mt-32 { margin-top: var(--spacing-32); }
.mr-32 { margin-right: var(--spacing-32); }
.mb-32 { margin-bottom: var(--spacing-32); }
.ml-32 { margin-left: var(--spacing-32); }
.mx-32 { margin-left: var(--spacing-32); margin-right: var(--spacing-32); }
.my-32 { margin-top: var(--spacing-32); margin-bottom: var(--spacing-32); }

.m-40 { margin: var(--spacing-40); }
.mt-40 { margin-top: var(--spacing-40); }
.mr-40 { margin-right: var(--spacing-40); }
.mb-40 { margin-bottom: var(--spacing-40); }
.ml-40 { margin-left: var(--spacing-40); }
.mx-40 { margin-left: var(--spacing-40); margin-right: var(--spacing-40); }
.my-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }

.m-48 { margin: var(--spacing-48); }
.mt-48 { margin-top: var(--spacing-48); }
.mr-48 { margin-right: var(--spacing-48); }
.mb-48 { margin-bottom: var(--spacing-48); }
.ml-48 { margin-left: var(--spacing-48); }
.mx-48 { margin-left: var(--spacing-48); margin-right: var(--spacing-48); }
.my-48 { margin-top: var(--spacing-48); margin-bottom: var(--spacing-48); }

.m-56 { margin: var(--spacing-56); }
.mt-56 { margin-top: var(--spacing-56); }
.mr-56 { margin-right: var(--spacing-56); }
.mb-56 { margin-bottom: var(--spacing-56); }
.ml-56 { margin-left: var(--spacing-56); }
.mx-56 { margin-left: var(--spacing-56); margin-right: var(--spacing-56); }
.my-56 { margin-top: var(--spacing-56); margin-bottom: var(--spacing-56); }

.m-64 { margin: var(--spacing-64); }
.mt-64 { margin-top: var(--spacing-64); }
.mr-64 { margin-right: var(--spacing-64); }
.mb-64 { margin-bottom: var(--spacing-64); }
.ml-64 { margin-left: var(--spacing-64); }
.mx-64 { margin-left: var(--spacing-64); margin-right: var(--spacing-64); }
.my-64 { margin-top: var(--spacing-64); margin-bottom: var(--spacing-64); }

/* Padding utilities */
.p-0 { padding: var(--spacing-0); }
.pt-0 { padding-top: var(--spacing-0); }
.pr-0 { padding-right: var(--spacing-0); }
.pb-0 { padding-bottom: var(--spacing-0); }
.pl-0 { padding-left: var(--spacing-0); }
.px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }
.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }

.p-px { padding: var(--spacing-px); }
.pt-px { padding-top: var(--spacing-px); }
.pr-px { padding-right: var(--spacing-px); }
.pb-px { padding-bottom: var(--spacing-px); }
.pl-px { padding-left: var(--spacing-px); }
.px-px { padding-left: var(--spacing-px); padding-right: var(--spacing-px); }
.py-px { padding-top: var(--spacing-px); padding-bottom: var(--spacing-px); }

.p-0.5 { padding: var(--spacing-0.5); }
.pt-0.5 { padding-top: var(--spacing-0.5); }
.pr-0.5 { padding-right: var(--spacing-0.5); }
.pb-0.5 { padding-bottom: var(--spacing-0.5); }
.pl-0.5 { padding-left: var(--spacing-0.5); }
.px-0.5 { padding-left: var(--spacing-0.5); padding-right: var(--spacing-0.5); }
.py-0.5 { padding-top: var(--spacing-0.5); padding-bottom: var(--spacing-0.5); }

.p-1 { padding: var(--spacing-1); }
.pt-1 { padding-top: var(--spacing-1); }
.pr-1 { padding-right: var(--spacing-1); }
.pb-1 { padding-bottom: var(--spacing-1); }
.pl-1 { padding-left: var(--spacing-1); }
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }

.p-1.5 { padding: var(--spacing-1.5); }
.pt-1.5 { padding-top: var(--spacing-1.5); }
.pr-1.5 { padding-right: var(--spacing-1.5); }
.pb-1.5 { padding-bottom: var(--spacing-1.5); }
.pl-1.5 { padding-left: var(--spacing-1.5); }
.px-1.5 { padding-left: var(--spacing-1.5); padding-right: var(--spacing-1.5); }
.py-1.5 { padding-top: var(--spacing-1.5); padding-bottom: var(--spacing-1.5); }

.p-2 { padding: var(--spacing-2); }
.pt-2 { padding-top: var(--spacing-2); }
.pr-2 { padding-right: var(--spacing-2); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pl-2 { padding-left: var(--spacing-2); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }

.p-2.5 { padding: var(--spacing-2.5); }
.pt-2.5 { padding-top: var(--spacing-2.5); }
.pr-2.5 { padding-right: var(--spacing-2.5); }
.pb-2.5 { padding-bottom: var(--spacing-2.5); }
.pl-2.5 { padding-left: var(--spacing-2.5); }
.px-2.5 { padding-left: var(--spacing-2.5); padding-right: var(--spacing-2.5); }
.py-2.5 { padding-top: var(--spacing-2.5); padding-bottom: var(--spacing-2.5); }

.p-3 { padding: var(--spacing-3); }
.pt-3 { padding-top: var(--spacing-3); }
.pr-3 { padding-right: var(--spacing-3); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pl-3 { padding-left: var(--spacing-3); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }

.p-3.5 { padding: var(--spacing-3.5); }
.pt-3.5 { padding-top: var(--spacing-3.5); }
.pr-3.5 { padding-right: var(--spacing-3.5); }
.pb-3.5 { padding-bottom: var(--spacing-3.5); }
.pl-3.5 { padding-left: var(--spacing-3.5); }
.px-3.5 { padding-left: var(--spacing-3.5); padding-right: var(--spacing-3.5); }
.py-3.5 { padding-top: var(--spacing-3.5); padding-bottom: var(--spacing-3.5); }

.p-4 { padding: var(--spacing-4); }
.pt-4 { padding-top: var(--spacing-4); }
.pr-4 { padding-right: var(--spacing-4); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pl-4 { padding-left: var(--spacing-4); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

.p-5 { padding: var(--spacing-5); }
.pt-5 { padding-top: var(--spacing-5); }
.pr-5 { padding-right: var(--spacing-5); }
.pb-5 { padding-bottom: var(--spacing-5); }
.pl-5 { padding-left: var(--spacing-5); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }

.p-6 { padding: var(--spacing-6); }
.pt-6 { padding-top: var(--spacing-6); }
.pr-6 { padding-right: var(--spacing-6); }
.pb-6 { padding-bottom: var(--spacing-6); }
.pl-6 { padding-left: var(--spacing-6); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

.p-8 { padding: var(--spacing-8); }
.pt-8 { padding-top: var(--spacing-8); }
.pr-8 { padding-right: var(--spacing-8); }
.pb-8 { padding-bottom: var(--spacing-8); }
.pl-8 { padding-left: var(--spacing-8); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

.p-10 { padding: var(--spacing-10); }
.pt-10 { padding-top: var(--spacing-10); }
.pr-10 { padding-right: var(--spacing-10); }
.pb-10 { padding-bottom: var(--spacing-10); }
.pl-10 { padding-left: var(--spacing-10); }
.px-10 { padding-left: var(--spacing-10); padding-right: var(--spacing-10); }
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }

.p-12 { padding: var(--spacing-12); }
.pt-12 { padding-top: var(--spacing-12); }
.pr-12 { padding-right: var(--spacing-12); }
.pb-12 { padding-bottom: var(--spacing-12); }
.pl-12 { padding-left: var(--spacing-12); }
.px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }

.p-16 { padding: var(--spacing-16); }
.pt-16 { padding-top: var(--spacing-16); }
.pr-16 { padding-right: var(--spacing-16); }
.pb-16 { padding-bottom: var(--spacing-16); }
.pl-16 { padding-left: var(--spacing-16); }
.px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }

.p-20 { padding: var(--spacing-20); }
.pt-20 { padding-top: var(--spacing-20); }
.pr-20 { padding-right: var(--spacing-20); }
.pb-20 { padding-bottom: var(--spacing-20); }
.pl-20 { padding-left: var(--spacing-20); }
.px-20 { padding-left: var(--spacing-20); padding-right: var(--spacing-20); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }

.p-24 { padding: var(--spacing-24); }
.pt-24 { padding-top: var(--spacing-24); }
.pr-24 { padding-right: var(--spacing-24); }
.pb-24 { padding-bottom: var(--spacing-24); }
.pl-24 { padding-left: var(--spacing-24); }
.px-24 { padding-left: var(--spacing-24); padding-right: var(--spacing-24); }
.py-24 { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }

.p-32 { padding: var(--spacing-32); }
.pt-32 { padding-top: var(--spacing-32); }
.pr-32 { padding-right: var(--spacing-32); }
.pb-32 { padding-bottom: var(--spacing-32); }
.pl-32 { padding-left: var(--spacing-32); }
.px-32 { padding-left: var(--spacing-32); padding-right: var(--spacing-32); }
.py-32 { padding-top: var(--spacing-32); padding-bottom: var(--spacing-32); }

.p-40 { padding: var(--spacing-40); }
.pt-40 { padding-top: var(--spacing-40); }
.pr-40 { padding-right: var(--spacing-40); }
.pb-40 { padding-bottom: var(--spacing-40); }
.pl-40 { padding-left: var(--spacing-40); }
.px-40 { padding-left: var(--spacing-40); padding-right: var(--spacing-40); }
.py-40 { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }

.p-48 { padding: var(--spacing-48); }
.pt-48 { padding-top: var(--spacing-48); }
.pr-48 { padding-right: var(--spacing-48); }
.pb-48 { padding-bottom: var(--spacing-48); }
.pl-48 { padding-left: var(--spacing-48); }
.px-48 { padding-left: var(--spacing-48); padding-right: var(--spacing-48); }
.py-48 { padding-top: var(--spacing-48); padding-bottom: var(--spacing-48); }

.p-56 { padding: var(--spacing-56); }
.pt-56 { padding-top: var(--spacing-56); }
.pr-56 { padding-right: var(--spacing-56); }
.pb-56 { padding-bottom: var(--spacing-56); }
.pl-56 { padding-left: var(--spacing-56); }
.px-56 { padding-left: var(--spacing-56); padding-right: var(--spacing-56); }
.py-56 { padding-top: var(--spacing-56); padding-bottom: var(--spacing-56); }

.p-64 { padding: var(--spacing-64); }
.pt-64 { padding-top: var(--spacing-64); }
.pr-64 { padding-right: var(--spacing-64); }
.pb-64 { padding-bottom: var(--spacing-64); }
.pl-64 { padding-left: var(--spacing-64); }
.px-64 { padding-left: var(--spacing-64); padding-right: var(--spacing-64); }
.py-64 { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); }

/* Gap utilities */
.gap-0 { gap: var(--spacing-0); }
.gap-x-0 { column-gap: var(--spacing-0); }
.gap-y-0 { row-gap: var(--spacing-0); }

.gap-px { gap: var(--spacing-px); }
.gap-x-px { column-gap: var(--spacing-px); }
.gap-y-px { row-gap: var(--spacing-px); }

.gap-0.5 { gap: var(--spacing-0.5); }
.gap-x-0.5 { column-gap: var(--spacing-0.5); }
.gap-y-0.5 { row-gap: var(--spacing-0.5); }

.gap-1 { gap: var(--spacing-1); }
.gap-x-1 { column-gap: var(--spacing-1); }
.gap-y-1 { row-gap: var(--spacing-1); }

.gap-1.5 { gap: var(--spacing-1.5); }
.gap-x-1.5 { column-gap: var(--spacing-1.5); }
.gap-y-1.5 { row-gap: var(--spacing-1.5); }

.gap-2 { gap: var(--spacing-2); }
.gap-x-2 { column-gap: var(--spacing-2); }
.gap-y-2 { row-gap: var(--spacing-2); }

.gap-2.5 { gap: var(--spacing-2.5); }
.gap-x-2.5 { column-gap: var(--spacing-2.5); }
.gap-y-2.5 { row-gap: var(--spacing-2.5); }

.gap-3 { gap: var(--spacing-3); }
.gap-x-3 { column-gap: var(--spacing-3); }
.gap-y-3 { row-gap: var(--spacing-3); }

.gap-3.5 { gap: var(--spacing-3.5); }
.gap-x-3.5 { column-gap: var(--spacing-3.5); }
.gap-y-3.5 { row-gap: var(--spacing-3.5); }

.gap-4 { gap: var(--spacing-4); }
.gap-x-4 { column-gap: var(--spacing-4); }
.gap-y-4 { row-gap: var(--spacing-4); }

.gap-5 { gap: var(--spacing-5); }
.gap-x-5 { column-gap: var(--spacing-5); }
.gap-y-5 { row-gap: var(--spacing-5); }

.gap-6 { gap: var(--spacing-6); }
.gap-x-6 { column-gap: var(--spacing-6); }
.gap-y-6 { row-gap: var(--spacing-6); }

.gap-8 { gap: var(--spacing-8); }
.gap-x-8 { column-gap: var(--spacing-8); }
.gap-y-8 { row-gap: var(--spacing-8); }

.gap-10 { gap: var(--spacing-10); }
.gap-x-10 { column-gap: var(--spacing-10); }
.gap-y-10 { row-gap: var(--spacing-10); }

.gap-12 { gap: var(--spacing-12); }
.gap-x-12 { column-gap: var(--spacing-12); }
.gap-y-12 { row-gap: var(--spacing-12); }

.gap-16 { gap: var(--spacing-16); }
.gap-x-16 { column-gap: var(--spacing-16); }
.gap-y-16 { row-gap: var(--spacing-16); }

.gap-20 { gap: var(--spacing-20); }
.gap-x-20 { column-gap: var(--spacing-20); }
.gap-y-20 { row-gap: var(--spacing-20); }

.gap-24 { gap: var(--spacing-24); }
.gap-x-24 { column-gap: var(--spacing-24); }
.gap-y-24 { row-gap: var(--spacing-24); }

.gap-32 { gap: var(--spacing-32); }
.gap-x-32 { column-gap: var(--spacing-32); }
.gap-y-32 { row-gap: var(--spacing-32); }

.gap-40 { gap: var(--spacing-40); }
.gap-x-40 { column-gap: var(--spacing-40); }
.gap-y-40 { row-gap: var(--spacing-40); }

.gap-48 { gap: var(--spacing-48); }
.gap-x-48 { column-gap: var(--spacing-48); }
.gap-y-48 { row-gap: var(--spacing-48); }

.gap-56 { gap: var(--spacing-56); }
.gap-x-56 { column-gap: var(--spacing-56); }
.gap-y-56 { row-gap: var(--spacing-56); }

.gap-64 { gap: var(--spacing-64); }
.gap-x-64 { column-gap: var(--spacing-64); }
.gap-y-64 { row-gap: var(--spacing-64); }