:root {
  --grid-columns: 12;
  --grid-gap: 32px;
  --grid-margin-x: 80px;
  --grid-margin-y: 120px;

  --density-1: 4px;
  --density-2: 8px;
  --density-3: 16px;
  --density-4: 24px;
  --density-5: 32px;
  --density-6: 40px;
  --density-7: 48px;
  --density-8: 56px;
  --density-9: 80px;
  --density-10: 100px;
  --density-11: 120px;
  --density-12: 140px;
  --density-999: 999px;
}

@media (min-width: 1025px) and (max-width: 1200px) {
  :root {
    --grid-gap: 24px;
    --grid-margin-x: 48px;

    --density-9: 64px;
    --density-10: 76px;
    --density-11: 92px;
    --density-12: 108px;
  }
}

@media (max-width: 1024px) {
  :root {
    --grid-columns: 4;
    --grid-gap: 16px;
    --grid-margin-x: 24px;

    --density-1: 3px;
    --density-2: 6px;
    --density-3: 12px;
    --density-4: 20px;
    --density-5: 24px;
    --density-6: 32px;
    --density-7: 40px;
    --density-8: 48px;
    --density-9: 56px;
    --density-10: 64px;
    --density-11: 72px;
    --density-12: 80px;
  }
}

.d-flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.flex-grow-1 { flex-grow: 1; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
.mt-auto { margin-top: auto; }
.layout-1fr-auto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--grid-gap);
  align-items: stretch;
}
.gap-1 { gap: var(--density-1); }
.gap-2 { gap: var(--density-2); }
.gap-3 { gap: var(--density-3); }
.gap-4 { gap: var(--density-4); }
.gap-5 { gap: var(--density-5); }
.gap-9 { gap: var(--density-9); }

.mt-0, .pt-0 { margin-top: 0 !important; padding-top: 0 !important; }
.mb-0, .pb-0 { margin-bottom: 0 !important; padding-bottom: 0 !important; }

.mt-1  { margin-top: var(--density-1) !important; }
.mt-2  { margin-top: var(--density-2) !important; }
.mt-3  { margin-top: var(--density-3) !important; }
.mt-4  { margin-top: var(--density-4) !important; }
.mt-5  { margin-top: var(--density-5) !important; }
.mt-6  { margin-top: var(--density-6) !important; }
.mt-7  { margin-top: var(--density-7) !important; }
.mt-8  { margin-top: var(--density-8) !important; }
.mt-9  { margin-top: var(--density-9) !important; }
.mt-10 { margin-top: var(--density-10) !important; }
.mt-11 { margin-top: var(--density-11) !important; }
.mt-12 { margin-top: var(--density-12) !important; }

.mb-1  { margin-bottom: var(--density-1) !important; }
.mb-2  { margin-bottom: var(--density-2) !important; }
.mb-3  { margin-bottom: var(--density-3) !important; }
.mb-4  { margin-bottom: var(--density-4) !important; }
.mb-5  { margin-bottom: var(--density-5) !important; }
.mb-6  { margin-bottom: var(--density-6) !important; }
.mb-7  { margin-bottom: var(--density-7) !important; }
.mb-8  { margin-bottom: var(--density-8) !important; }
.mb-9  { margin-bottom: var(--density-9) !important; }
.mb-10 { margin-bottom: var(--density-10) !important; }
.mb-11 { margin-bottom: var(--density-11) !important; }
.mb-12 { margin-bottom: var(--density-12) !important; }

.pt-1  { padding-top: var(--density-1) !important; }
.pt-2  { padding-top: var(--density-2) !important; }
.pt-3  { padding-top: var(--density-3) !important; }
.pt-4  { padding-top: var(--density-4) !important; }
.pt-5  { padding-top: var(--density-5) !important; }
.pt-6  { padding-top: var(--density-6) !important; }
.pt-7  { padding-top: var(--density-7) !important; }
.pt-8  { padding-top: var(--density-8) !important; }
.pt-9  { padding-top: var(--density-9) !important; }
.pt-10 { padding-top: var(--density-10) !important; }
.pt-11 { padding-top: var(--density-11) !important; }
.pt-12 { padding-top: var(--density-12) !important; }

.pb-1  { padding-bottom: var(--density-1) !important; }
.pb-2  { padding-bottom: var(--density-2) !important; }
.pb-3  { padding-bottom: var(--density-3) !important; }
.pb-4  { padding-bottom: var(--density-4) !important; }
.pb-5  { padding-bottom: var(--density-5) !important; }
.pb-6  { padding-bottom: var(--density-6) !important; }
.pb-7  { padding-bottom: var(--density-7) !important; }
.pb-8  { padding-bottom: var(--density-8) !important; }
.pb-9  { padding-bottom: var(--density-9) !important; }
.pb-10 { padding-bottom: var(--density-10) !important; }
.pb-11 { padding-bottom: var(--density-11) !important; }
.pb-12 { padding-bottom: var(--density-12) !important; }

.pl-1  { padding-left: var(--density-1) !important; }
.pl-2  { padding-left: var(--density-2) !important; }
.pl-3  { padding-left: var(--density-3) !important; }
.pl-4  { padding-left: var(--density-4) !important; }
.pl-5  { padding-left: var(--density-5) !important; }
.pl-6  { padding-left: var(--density-6) !important; }
.pl-7  { padding-left: var(--density-7) !important; }
.pl-8  { padding-left: var(--density-8) !important; }
.pl-9  { padding-left: var(--density-9) !important; }
.pl-10 { padding-left: var(--density-10) !important; }
.pl-11 { padding-left: var(--density-11) !important; }
.pl-12 { padding-left: var(--density-12) !important; }

.pr-1  { padding-right: var(--density-1) !important; }
.pr-2  { padding-right: var(--density-2) !important; }
.pr-3  { padding-right: var(--density-3) !important; }
.pr-4  { padding-right: var(--density-4) !important; }
.pr-5  { padding-right: var(--density-5) !important; }
.pr-6  { padding-right: var(--density-6) !important; }
.pr-7  { padding-right: var(--density-7) !important; }
.pr-8  { padding-right: var(--density-8) !important; }
.pr-9  { padding-right: var(--density-9) !important; }
.pr-10 { padding-right: var(--density-10) !important; }
.pr-11 { padding-right: var(--density-11) !important; }
.pr-12 { padding-right: var(--density-12) !important; }


@media (min-width: 1025px) and (max-width: 1200px) {

  .px-0-tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .text-center-tablet { text-align: center !important; }
  .text-left-tablet { text-align: left !important; }
  .text-right-tablet { text-align: right !important; }

}



@media (max-width: 1024px) {
  .layout-1fr-auto {
    grid-template-columns: 1fr;
  }

  .gap-9 {
    gap: var(--grid-gap);
  }

  .px-0-mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .text-center-mobile { text-align: center !important; }
  .text-left-mobile { text-align: left !important; }
  .text-right-mobile { text-align: right !important; }

  .py-0-mobile {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .pb-mobile {
  padding-bottom: var(--density-3) !important;
}
  .pb-extra-mobile {
  padding-bottom: var(--density-7) !important;
}
}