.maxWidth {
  max-width: var(--max-width-base);
}

@media (min-width: 768px) {
  .maxWidth {
    max-width: var(--max-width-md, var(--max-width-base));
  }
}

@media (min-width: 1200px) {
  .maxWidth {
    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
  }
}

@media (max-width: 767px) {
  .mobileDirectionRow {
    flex-direction: row;
  }

  .mobileDirectionColumn {
    flex-direction: column;
  }

  .mobileGapXxs {
    gap: var(--spacing-xxs);
  }

  .mobileGapXs {
    gap: var(--spacing-xs);
  }

  .mobileGapSm {
    gap: var(--spacing-sm);
  }

  .mobileGapMd {
    gap: var(--spacing-md);
  }

  .mobileGapLg {
    gap: var(--spacing-lg);
  }

  .mobileAlignStart {
    align-items: flex-start;
  }

  .mobileAlignCenter {
    align-items: center;
  }

  .mobileAlignEnd {
    align-items: flex-end;
  }

  .mobileJustifyStart {
    justify-content: flex-start;
  }

  .mobileJustifyCenter {
    justify-content: center;
  }

  .mobileJustifyEnd {
    justify-content: flex-end;
  }

  .mobileJustifyBetween {
    justify-content: space-between;
  }

  .mobileWrap {
    flex-wrap: wrap;
  }
}