@import "../mixins/_spacing.less";

.spacing(0, 0);
.spacing(1, var(--size-8));
.spacing(2, var(--size-16));
.spacing(3, var(--size-24));
.spacing(4, var(--size-32));
.spacing(5, var(--size-40));

.spacing-vertical(4, var(--size-32));
.spacing-vertical(5, var(--size-40));

.gap-y-1 {
  row-gap: var(--size-8);
}

.responsive-spacing(panel, var(--size-16), var(--size-24), var(--size-32));
.responsive-spacing-vertical(section-1, var(--size-16), var(--size-24), var(--size-32));
.responsive-spacing-vertical(section-2, var(--size-32), var(--size-48), var(--size-64));
.responsive-spacing-vertical(section-3, var(--size-48), var(--size-72), var(--size-96));

.m-x-auto {
  .margin(right,auto) !important;
  .margin(left, auto) !important;
}

.m-r-auto {
  .margin(right,auto) !important;
}

.m-l-auto {
  .margin(left, auto) !important;
}

.section {
  padding-top: var(--size-48);
  padding-bottom: var(--size-48);

  @media (--screen-sm) {
    padding-top: var(--size-72);
    padding-bottom: var(--size-72);
  }

  @media (--screen-lg) {
    padding-top: var(--size-96);
    padding-bottom: var(--size-96);
  }
}

.np-text-hyphenated {
  @supports (hyphenate-limit-chars: 1) {
    hyphens: auto;
    hyphenate-limit-chars: 7 3;

    @media (--screen-md) {
      hyphenate-limit-chars: 8 3;
    }

    @media (--screen-lg) {
      hyphenate-limit-chars: 10 4 3;
    }
  }

  @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
    hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;

    @media (--screen-lg) {
      -webkit-hyphenate-limit-before: 4;
    }
  }
}