:root {
    --space-0: 0.0rem;
    --space-1: 0.5rem;
    --space-2: 1.0rem;
    --space-3: 1.5rem;
    --space-4: 2.0rem;
    --space-5: 2.5rem;
    --space-6: 3.0rem;
  }
  
  .mt-xl-0 { margin-top: var(--space-0); }
  .mb-xl-0 { margin-bottom: var(--space-0); }
  .ml-xl-0 { margin-left: var(--space-0); }
  .mr-xl-0 { margin-right: var(--space-0); }
  .mx-xl-0 { margin-left: var(--space-0); }
  .mx-xl-0 { margin-right: var(--space-0); }
  .my-xl-0 { margin-top: var(--space-0); }
  .my-xl-0 { margin-bottom: var(--space-0); }
  .mt-xl-1 { margin-top: var(--space-1); }
  .mb-xl-1 { margin-bottom: var(--space-1); }
  .ml-xl-1 { margin-left: var(--space-1); }
  .mr-xl-1 { margin-right: var(--space-1); }
  .mx-xl-1 { margin-left: var(--space-1); }
  .mx-xl-1 { margin-right: var(--space-1); }
  .my-xl-1 { margin-top: var(--space-1); }
  .my-xl-1 { margin-bottom: var(--space-1); }
  .mt-xl-2 { margin-top: var(--space-2); }
  .mb-xl-2 { margin-bottom: var(--space-2); }
  .ml-xl-2 { margin-left: var(--space-2); }
  .mr-xl-2 { margin-right: var(--space-2); }
  .mx-xl-2 { margin-left: var(--space-2); }
  .mx-xl-2 { margin-right: var(--space-2); }
  .my-xl-2 { margin-top: var(--space-2); }
  .my-xl-2 { margin-bottom: var(--space-2); }
  .mt-xl-3 { margin-top: var(--space-3); }
  .mb-xl-3 { margin-bottom: var(--space-3); }
  .ml-xl-3 { margin-left: var(--space-3); }
  .mr-xl-3 { margin-right: var(--space-3); }
  .mx-xl-3 { margin-left: var(--space-3); }
  .mx-xl-3 { margin-right: var(--space-3); }
  .my-xl-3 { margin-top: var(--space-3); }
  .my-xl-3 { margin-bottom: var(--space-3); }
  .mt-xl-4 { margin-top: var(--space-4); }
  .mb-xl-4 { margin-bottom: var(--space-4); }
  .ml-xl-4 { margin-left: var(--space-4); }
  .mr-xl-4 { margin-right: var(--space-4); }
  .mx-xl-4 { margin-left: var(--space-4); }
  .mx-xl-4 { margin-right: var(--space-4); }
  .my-xl-4 { margin-top: var(--space-4); }
  .my-xl-4 { margin-bottom: var(--space-4); }
  .mt-xl-5 { margin-top: var(--space-5); }
  .mb-xl-5 { margin-bottom: var(--space-5); }
  .ml-xl-5 { margin-left: var(--space-5); }
  .mr-xl-5 { margin-right: var(--space-5); }
  .mx-xl-5 { margin-left: var(--space-5); }
  .mx-xl-5 { margin-right: var(--space-5); }
  .my-xl-5 { margin-top: var(--space-5); }
  .my-xl-5 { margin-bottom: var(--space-5); }
  .mt-xl-6 { margin-top: var(--space-6); }
  .mb-xl-6 { margin-bottom: var(--space-6); }
  .ml-xl-6 { margin-left: var(--space-6); }
  .mr-xl-6 { margin-right: var(--space-6); }
  .mx-xl-6 { margin-left: var(--space-6); }
  .mx-xl-6 { margin-right: var(--space-6); }
  .my-xl-6 { margin-top: var(--space-6); }
  .my-xl-6 { margin-bottom: var(--space-6); }
  
  @media (max-width: 599px) {
    .mt-xs-0 { margin-top: var(--space-0); }
    .mb-xs-0 { margin-bottom: var(--space-0); }
    .ml-xs-0 { margin-left: var(--space-0); }
    .mr-xs-0 { margin-right: var(--space-0); }
    .mx-xs-0 { margin-left: var(--space-0); }
    .mx-xs-0 { margin-right: var(--space-0); }
    .my-xs-0 { margin-top: var(--space-0); }
    .my-xs-0 { margin-bottom: var(--space-0); }
    .mt-xs-1 { margin-top: var(--space-1); }
    .mb-xs-1 { margin-bottom: var(--space-1); }
    .ml-xs-1 { margin-left: var(--space-1); }
    .mr-xs-1 { margin-right: var(--space-1); }
    .mx-xs-1 { margin-left: var(--space-1); }
    .mx-xs-1 { margin-right: var(--space-1); }
    .my-xs-1 { margin-top: var(--space-1); }
    .my-xs-1 { margin-bottom: var(--space-1); }
    .mt-xs-2 { margin-top: var(--space-2); }
    .mb-xs-2 { margin-bottom: var(--space-2); }
    .ml-xs-2 { margin-left: var(--space-2); }
    .mr-xs-2 { margin-right: var(--space-2); }
    .mx-xs-2 { margin-left: var(--space-2); }
    .mx-xs-2 { margin-right: var(--space-2); }
    .my-xs-2 { margin-top: var(--space-2); }
    .my-xs-2 { margin-bottom: var(--space-2); }
    .mt-xs-3 { margin-top: var(--space-3); }
    .mb-xs-3 { margin-bottom: var(--space-3); }
    .ml-xs-3 { margin-left: var(--space-3); }
    .mr-xs-3 { margin-right: var(--space-3); }
    .mx-xs-3 { margin-left: var(--space-3); }
    .mx-xs-3 { margin-right: var(--space-3); }
    .my-xs-3 { margin-top: var(--space-3); }
    .my-xs-3 { margin-bottom: var(--space-3); }
    .mt-xs-4 { margin-top: var(--space-4); }
    .mb-xs-4 { margin-bottom: var(--space-4); }
    .ml-xs-4 { margin-left: var(--space-4); }
    .mr-xs-4 { margin-right: var(--space-4); }
    .mx-xs-4 { margin-left: var(--space-4); }
    .mx-xs-4 { margin-right: var(--space-4); }
    .my-xs-4 { margin-top: var(--space-4); }
    .my-xs-4 { margin-bottom: var(--space-4); }
    .mt-xs-5 { margin-top: var(--space-5); }
    .mb-xs-5 { margin-bottom: var(--space-5); }
    .ml-xs-5 { margin-left: var(--space-5); }
    .mr-xs-5 { margin-right: var(--space-5); }
    .mx-xs-5 { margin-left: var(--space-5); }
    .mx-xs-5 { margin-right: var(--space-5); }
    .my-xs-5 { margin-top: var(--space-5); }
    .my-xs-5 { margin-bottom: var(--space-5); }
    .mt-xs-6 { margin-top: var(--space-6); }
    .mb-xs-6 { margin-bottom: var(--space-6); }
    .ml-xs-6 { margin-left: var(--space-6); }
    .mr-xs-6 { margin-right: var(--space-6); }
    .mx-xs-6 { margin-left: var(--space-6); }
    .mx-xs-6 { margin-right: var(--space-6); }
    .my-xs-6 { margin-top: var(--space-6); }
    .my-xs-6 { margin-bottom: var(--space-6); }
  }
  
  @media (max-width: 839px) {
    .mt-sm-0 { margin-top: var(--space-0); }
    .mb-sm-0 { margin-bottom: var(--space-0); }
    .ml-sm-0 { margin-left: var(--space-0); }
    .mr-sm-0 { margin-right: var(--space-0); }
    .mx-sm-0 { margin-left: var(--space-0); }
    .mx-sm-0 { margin-right: var(--space-0); }
    .my-sm-0 { margin-top: var(--space-0); }
    .my-sm-0 { margin-bottom: var(--space-0); }
    .mt-sm-1 { margin-top: var(--space-1); }
    .mb-sm-1 { margin-bottom: var(--space-1); }
    .ml-sm-1 { margin-left: var(--space-1); }
    .mr-sm-1 { margin-right: var(--space-1); }
    .mx-sm-1 { margin-left: var(--space-1); }
    .mx-sm-1 { margin-right: var(--space-1); }
    .my-sm-1 { margin-top: var(--space-1); }
    .my-sm-1 { margin-bottom: var(--space-1); }
    .mt-sm-2 { margin-top: var(--space-2); }
    .mb-sm-2 { margin-bottom: var(--space-2); }
    .ml-sm-2 { margin-left: var(--space-2); }
    .mr-sm-2 { margin-right: var(--space-2); }
    .mx-sm-2 { margin-left: var(--space-2); }
    .mx-sm-2 { margin-right: var(--space-2); }
    .my-sm-2 { margin-top: var(--space-2); }
    .my-sm-2 { margin-bottom: var(--space-2); }
    .mt-sm-3 { margin-top: var(--space-3); }
    .mb-sm-3 { margin-bottom: var(--space-3); }
    .ml-sm-3 { margin-left: var(--space-3); }
    .mr-sm-3 { margin-right: var(--space-3); }
    .mx-sm-3 { margin-left: var(--space-3); }
    .mx-sm-3 { margin-right: var(--space-3); }
    .my-sm-3 { margin-top: var(--space-3); }
    .my-sm-3 { margin-bottom: var(--space-3); }
    .mt-sm-4 { margin-top: var(--space-4); }
    .mb-sm-4 { margin-bottom: var(--space-4); }
    .ml-sm-4 { margin-left: var(--space-4); }
    .mr-sm-4 { margin-right: var(--space-4); }
    .mx-sm-4 { margin-left: var(--space-4); }
    .mx-sm-4 { margin-right: var(--space-4); }
    .my-sm-4 { margin-top: var(--space-4); }
    .my-sm-4 { margin-bottom: var(--space-4); }
    .mt-sm-5 { margin-top: var(--space-5); }
    .mb-sm-5 { margin-bottom: var(--space-5); }
    .ml-sm-5 { margin-left: var(--space-5); }
    .mr-sm-5 { margin-right: var(--space-5); }
    .mx-sm-5 { margin-left: var(--space-5); }
    .mx-sm-5 { margin-right: var(--space-5); }
    .my-sm-5 { margin-top: var(--space-5); }
    .my-sm-5 { margin-bottom: var(--space-5); }
    .mt-sm-6 { margin-top: var(--space-6); }
    .mb-sm-6 { margin-bottom: var(--space-6); }
    .ml-sm-6 { margin-left: var(--space-6); }
    .mr-sm-6 { margin-right: var(--space-6); }
    .mx-sm-6 { margin-left: var(--space-6); }
    .mx-sm-6 { margin-right: var(--space-6); }
    .my-sm-6 { margin-top: var(--space-6); }
    .my-sm-6 { margin-bottom: var(--space-6); }
  }
  
  @media (max-width: 959px) {
    .mt-md-0 { margin-top: var(--space-0); }
    .mb-md-0 { margin-bottom: var(--space-0); }
    .ml-md-0 { margin-left: var(--space-0); }
    .mr-md-0 { margin-right: var(--space-0); }
    .mx-md-0 { margin-left: var(--space-0); }
    .mx-md-0 { margin-right: var(--space-0); }
    .my-md-0 { margin-top: var(--space-0); }
    .my-md-0 { margin-bottom: var(--space-0); }
    .mt-md-1 { margin-top: var(--space-1); }
    .mb-md-1 { margin-bottom: var(--space-1); }
    .ml-md-1 { margin-left: var(--space-1); }
    .mr-md-1 { margin-right: var(--space-1); }
    .mx-md-1 { margin-left: var(--space-1); }
    .mx-md-1 { margin-right: var(--space-1); }
    .my-md-1 { margin-top: var(--space-1); }
    .my-md-1 { margin-bottom: var(--space-1); }
    .mt-md-2 { margin-top: var(--space-2); }
    .mb-md-2 { margin-bottom: var(--space-2); }
    .ml-md-2 { margin-left: var(--space-2); }
    .mr-md-2 { margin-right: var(--space-2); }
    .mx-md-2 { margin-left: var(--space-2); }
    .mx-md-2 { margin-right: var(--space-2); }
    .my-md-2 { margin-top: var(--space-2); }
    .my-md-2 { margin-bottom: var(--space-2); }
    .mt-md-3 { margin-top: var(--space-3); }
    .mb-md-3 { margin-bottom: var(--space-3); }
    .ml-md-3 { margin-left: var(--space-3); }
    .mr-md-3 { margin-right: var(--space-3); }
    .mx-md-3 { margin-left: var(--space-3); }
    .mx-md-3 { margin-right: var(--space-3); }
    .my-md-3 { margin-top: var(--space-3); }
    .my-md-3 { margin-bottom: var(--space-3); }
    .mt-md-4 { margin-top: var(--space-4); }
    .mb-md-4 { margin-bottom: var(--space-4); }
    .ml-md-4 { margin-left: var(--space-4); }
    .mr-md-4 { margin-right: var(--space-4); }
    .mx-md-4 { margin-left: var(--space-4); }
    .mx-md-4 { margin-right: var(--space-4); }
    .my-md-4 { margin-top: var(--space-4); }
    .my-md-4 { margin-bottom: var(--space-4); }
    .mt-md-5 { margin-top: var(--space-5); }
    .mb-md-5 { margin-bottom: var(--space-5); }
    .ml-md-5 { margin-left: var(--space-5); }
    .mr-md-5 { margin-right: var(--space-5); }
    .mx-md-5 { margin-left: var(--space-5); }
    .mx-md-5 { margin-right: var(--space-5); }
    .my-md-5 { margin-top: var(--space-5); }
    .my-md-5 { margin-bottom: var(--space-5); }
    .mt-md-6 { margin-top: var(--space-6); }
    .mb-md-6 { margin-bottom: var(--space-6); }
    .ml-md-6 { margin-left: var(--space-6); }
    .mr-md-6 { margin-right: var(--space-6); }
    .mx-md-6 { margin-left: var(--space-6); }
    .mx-md-6 { margin-right: var(--space-6); }
    .my-md-6 { margin-top: var(--space-6); }
    .my-md-6 { margin-bottom: var(--space-6); }
  }
  
  @media (max-width: 1279px) {
    .mt-lg-0 { margin-top: var(--space-0); }
    .mb-lg-0 { margin-bottom: var(--space-0); }
    .ml-lg-0 { margin-left: var(--space-0); }
    .mr-lg-0 { margin-right: var(--space-0); }
    .mx-lg-0 { margin-left: var(--space-0); }
    .mx-lg-0 { margin-right: var(--space-0); }
    .my-lg-0 { margin-top: var(--space-0); }
    .my-lg-0 { margin-bottom: var(--space-0); }
    .mt-lg-1 { margin-top: var(--space-1); }
    .mb-lg-1 { margin-bottom: var(--space-1); }
    .ml-lg-1 { margin-left: var(--space-1); }
    .mr-lg-1 { margin-right: var(--space-1); }
    .mx-lg-1 { margin-left: var(--space-1); }
    .mx-lg-1 { margin-right: var(--space-1); }
    .my-lg-1 { margin-top: var(--space-1); }
    .my-lg-1 { margin-bottom: var(--space-1); }
    .mt-lg-2 { margin-top: var(--space-2); }
    .mb-lg-2 { margin-bottom: var(--space-2); }
    .ml-lg-2 { margin-left: var(--space-2); }
    .mr-lg-2 { margin-right: var(--space-2); }
    .mx-lg-2 { margin-left: var(--space-2); }
    .mx-lg-2 { margin-right: var(--space-2); }
    .my-lg-2 { margin-top: var(--space-2); }
    .my-lg-2 { margin-bottom: var(--space-2); }
    .mt-lg-3 { margin-top: var(--space-3); }
    .mb-lg-3 { margin-bottom: var(--space-3); }
    .ml-lg-3 { margin-left: var(--space-3); }
    .mr-lg-3 { margin-right: var(--space-3); }
    .mx-lg-3 { margin-left: var(--space-3); }
    .mx-lg-3 { margin-right: var(--space-3); }
    .my-lg-3 { margin-top: var(--space-3); }
    .my-lg-3 { margin-bottom: var(--space-3); }
    .mt-lg-4 { margin-top: var(--space-4); }
    .mb-lg-4 { margin-bottom: var(--space-4); }
    .ml-lg-4 { margin-left: var(--space-4); }
    .mr-lg-4 { margin-right: var(--space-4); }
    .mx-lg-4 { margin-left: var(--space-4); }
    .mx-lg-4 { margin-right: var(--space-4); }
    .my-lg-4 { margin-top: var(--space-4); }
    .my-lg-4 { margin-bottom: var(--space-4); }
    .mt-lg-5 { margin-top: var(--space-5); }
    .mb-lg-5 { margin-bottom: var(--space-5); }
    .ml-lg-5 { margin-left: var(--space-5); }
    .mr-lg-5 { margin-right: var(--space-5); }
    .mx-lg-5 { margin-left: var(--space-5); }
    .mx-lg-5 { margin-right: var(--space-5); }
    .my-lg-5 { margin-top: var(--space-5); }
    .my-lg-5 { margin-bottom: var(--space-5); }
    .mt-lg-6 { margin-top: var(--space-6); }
    .mb-lg-6 { margin-bottom: var(--space-6); }
    .ml-lg-6 { margin-left: var(--space-6); }
    .mr-lg-6 { margin-right: var(--space-6); }
    .mx-lg-6 { margin-left: var(--space-6); }
    .mx-lg-6 { margin-right: var(--space-6); }
    .my-lg-6 { margin-top: var(--space-6); }
    .my-lg-6 { margin-bottom: var(--space-6); }
  }
  

/* XL (default) */
.flex-xl-center-x { display: flex; justify-content: center; }
.flex-xl-center-y { display: flex; align-items: center; }
.flex-xl-center { display: flex; justify-content: center; align-items: center; }

@media (max-width: 599px) {
  .flex-xs-center-x { display: flex; justify-content: center; }
  .flex-xs-center-y { display: flex; align-items: center; }
  .flex-xs-center { display: flex; justify-content: center; align-items: center; }
}

@media (max-width: 839px) {
  .flex-sm-center-x { display: flex; justify-content: center; }
  .flex-sm-center-y { display: flex; align-items: center; }
  .flex-sm-center { display: flex; justify-content: center; align-items: center; }
}

@media (max-width: 959px) {
  .flex-md-center-x { display: flex; justify-content: center; }
  .flex-md-center-y { display: flex; align-items: center; }
  .flex-md-center { display: flex; justify-content: center; align-items: center; }
}

@media (max-width: 1279px) {
  .flex-lg-center-x { display: flex; justify-content: center; }
  .flex-lg-center-y { display: flex; align-items: center; }
  .flex-lg-center { display: flex; justify-content: center; align-items: center; }
}