/* Bootstrap-inspired spacing scale 
 Developed by: Abubakar Oyerogba
*/
:root {
  --spacing-6: 4rem; /* 64px */
  --spacing-7: 5rem; /* 80px */
  --spacing-8: 6.25rem; /* 100px */
}

/* Margin classes */
.m-6 {
  margin: var(--spacing-6);
}
.m-7 {
  margin: var(--spacing-7);
}
.m-8 {
  margin: var(--spacing-8);
}

/* Padding classes */
.p-6 {
  padding: var(--spacing-6);
}
.p-7 {
  padding: var(--spacing-7);
}
.p-8 {
  padding: var(--spacing-8);
}

/* Specific side margin classes */

.mt-6 {
  margin-top: var(--spacing-6);
}
.mt-7 {
  margin-top: var(--spacing-7);
}
.mt-8 {
  margin-top: var(--spacing-8);
}

.mb-6 {
  margin-bottom: var(--spacing-6);
}
.mb-7 {
  margin-bottom: var(--spacing-7);
}
.mb-8 {
  margin-bottom: var(--spacing-8);
}

.ms-6 {
  margin-left: var(--spacing-6);
}
.ms-7 {
  margin-left: var(--spacing-7);
}
.ms-8 {
  margin-left: var(--spacing-8);
}

.me-6 {
  margin-right: var(--spacing-6);
}
.me-7 {
  margin-right: var(--spacing-7);
}
.me-8 {
  margin-right: var(--spacing-8);
}

.mx-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}
.mx-7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}
.mx-8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}

.my-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}
.my-7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}
.my-8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

/* Specific side padding classes */
.pt-6 {
  padding-top: var(--spacing-6);
}
.pt-7 {
  padding-top: var(--spacing-7);
}
.pt-8 {
  padding-top: var(--spacing-8);
}

.pb-6 {
  padding-bottom: var(--spacing-6);
}
.pb-7 {
  padding-bottom: var(--spacing-7);
}
.pb-8 {
  padding-bottom: var(--spacing-8);
}

.ps-6 {
  padding-left: var(--spacing-6);
}
.ps-7 {
  padding-left: var(--spacing-7);
}
.ps-8 {
  padding-left: var(--spacing-8);
}

.pe-6 {
  padding-right: var(--spacing-6);
}
.pe-7 {
  padding-right: var(--spacing-7);
}
.pe-8 {
  padding-right: var(--spacing-8);
}

.px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
.px-7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}
.px-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}

.py-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}
.py-7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}
.py-8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}

/* Negative margin classes (for offsets) */
.m-n6 {
  margin: calc(var(--spacing-6) * -1);
}
.m-n7 {
  margin: calc(var(--spacing-7) * -1);
}
.m-n8 {
  margin: calc(var(--spacing-8) * -1);
}

.mt-n6 {
  margin-top: calc(var(--spacing-6) * -1);
}
.mt-n7 {
  margin-top: calc(var(--spacing-7) * -1);
}
.mt-n8 {
  margin-top: calc(var(--spacing-8) * -1);
}

.mb-n6 {
  margin-bottom: calc(var(--spacing-6) * -1);
}
.mb-n7 {
  margin-bottom: calc(var(--spacing-7) * -1);
}
.mb-n8 {
  margin-bottom: calc(var(--spacing-8) * -1);
}

.ms-n6 {
  margin-left: calc(var(--spacing-6) * -1);
}
.ms-n7 {
  margin-left: calc(var(--spacing-7) * -1);
}
.ms-n8 {
  margin-left: calc(var(--spacing-8) * -1);
}

.me-n6 {
  margin-right: calc(var(--spacing-6) * -1);
}
.me-n7 {
  margin-right: calc(var(--spacing-7) * -1);
}
.me-n8 {
  margin-right: calc(var(--spacing-8) * -1);
}

.mx-n6 {
  margin-left: calc(var(--spacing-6) * -1);
  margin-right: calc(var(--spacing-6) * -1);
}
.mx-n7 {
  margin-left: calc(var(--spacing-7) * -1);
  margin-right: calc(var(--spacing-7) * -1);
}
.mx-n8 {
  margin-left: calc(var(--spacing-8) * -1);
  margin-right: calc(var(--spacing-8) * -1);
}

.my-n6 {
  margin-top: calc(var(--spacing-6) * -1);
  margin-bottom: calc(var(--spacing-6) * -1);
}
.my-n7 {
  margin-top: calc(var(--spacing-7) * -1);
  margin-bottom: calc(var(--spacing-7) * -1);
}
.my-n8 {
  margin-top: calc(var(--spacing-8) * -1);
  margin-bottom: calc(var(--spacing-8) * -1);
}

/* Auto margin for centering */
.m-auto {
  margin: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* Responsive breakpoints (example for sm, md, lg - extend as needed) */
@media (min-width: 576px) {
  .m-sm-6 {
    margin: var(--spacing-6);
  }
  .m-sm-7 {
    margin: var(--spacing-7);
  }
  .m-sm-8 {
    margin: var(--spacing-8);
  }

  .p-sm-6 {
    padding: var(--spacing-6);
  }
  .p-sm-7 {
    padding: var(--spacing-7);
  }
  .p-sm-8 {
    padding: var(--spacing-8);
  }

  /* Add specific sides (mt-sm-*, pb-sm-*, etc.) as needed */
}

@media (min-width: 768px) {
  .m-md-6 {
    margin: var(--spacing-6);
  }
  .m-md-7 {
    margin: var(--spacing-7);
  }
  .m-md-8 {
    margin: var(--spacing-8);
  }

  .p-md-6 {
    padding: var(--spacing-6);
  }
  .p-md-7 {
    padding: var(--spacing-7);
  }
  .p-md-8 {
    padding: var(--spacing-8);
  }
}

@media (min-width: 992px) {
  .m-lg-6 {
    margin: var(--spacing-6);
  }
  .m-lg-7 {
    margin: var(--spacing-7);
  }
  .m-lg-8 {
    margin: var(--spacing-8);
  }

  .p-lg-6 {
    padding: var(--spacing-6);
  }
  .p-lg-7 {
    padding: var(--spacing-7);
  }
  .p-lg-8 {
    padding: var(--spacing-8);
  }
}