/* Spacing (gap = 30px) */

/* Padding all */
.p-1 { padding: var(--gap); }
.p-2 { padding: calc(var(--gap) * 2); }
.p-3 { padding: calc(var(--gap) * 3); }
.p-4 { padding: calc(var(--gap) * 4); }
.p-5 { padding: calc(var(--gap) * 5); }

/* Padding top */
.pt-1 { padding-top: var(--gap); }
.pt-2 { padding-top: calc(var(--gap) * 2); }
.pt-3 { padding-top: calc(var(--gap) * 3); }
.pt-4 { padding-top: calc(var(--gap) * 4); }
.pt-5 { padding-top: calc(var(--gap) * 5); }

/* Padding bottom */
.pb-1 { padding-bottom: var(--gap); }
.pb-2 { padding-bottom: calc(var(--gap) * 2); }
.pb-3 { padding-bottom: calc(var(--gap) * 3); }
.pb-4 { padding-bottom: calc(var(--gap) * 4); }
.pb-5 { padding-bottom: calc(var(--gap) * 5); }

/* Padding Y (top + bottom) */
.py-1 { padding-top: var(--gap); padding-bottom: var(--gap); }
.py-2 { padding-top: calc(var(--gap) * 2); padding-bottom: calc(var(--gap) * 2); }
.py-3 { padding-top: calc(var(--gap) * 3); padding-bottom: calc(var(--gap) * 3); }
.py-4 { padding-top: calc(var(--gap) * 4); padding-bottom: calc(var(--gap) * 4); }
.py-5 { padding-top: calc(var(--gap) * 5); padding-bottom: calc(var(--gap) * 5); }

/* Padding X (left + right) */
.px-1 { padding-left: var(--gap); padding-right: var(--gap); }
.px-2 { padding-left: calc(var(--gap) * 2); padding-right: calc(var(--gap) * 2); }
.px-3 { padding-left: calc(var(--gap) * 3); padding-right: calc(var(--gap) * 3); }
.px-4 { padding-left: calc(var(--gap) * 4); padding-right: calc(var(--gap) * 4); }
.px-5 { padding-left: calc(var(--gap) * 5); padding-right: calc(var(--gap) * 5); }

/* Margin all */
.m-1 { margin: var(--gap); }
.m-2 { margin: calc(var(--gap) * 2); }
.m-3 { margin: calc(var(--gap) * 3); }
.m-4 { margin: calc(var(--gap) * 4); }
.m-5 { margin: calc(var(--gap) * 5); }

/* Margin top */
.mt-1 { margin-top: var(--gap); }
.mt-2 { margin-top: calc(var(--gap) * 2); }
.mt-3 { margin-top: calc(var(--gap) * 3); }
.mt-4 { margin-top: calc(var(--gap) * 4); }
.mt-5 { margin-top: calc(var(--gap) * 5); }

/* Margin bottom */
.mb-1 { margin-bottom: var(--gap); }
.mb-2 { margin-bottom: calc(var(--gap) * 2); }
.mb-3 { margin-bottom: calc(var(--gap) * 3); }
.mb-4 { margin-bottom: calc(var(--gap) * 4); }
.mb-5 { margin-bottom: calc(var(--gap) * 5); }