.top-spacing--xs { margin-top: 10px; }
.top-spacing--s { margin-top: 16px; }
.top-spacing--m { margin-top: 32px; }
.top-spacing--l { margin-top: 48px; }
.top-spacing--xl { margin-top: 64px; }

.bottom-spacing--xs { margin-bottom: 10px; }
.bottom-spacing--s { margin-bottom: 16px; }
.bottom-spacing--m { margin-bottom: 32px; }
.bottom-spacing--l { margin-bottom: 48px; }
.bottom-spacing--xl { margin-bottom: 64px; }

.top-internal-spacing--xs { padding-top: 10px; }
.top-internal-spacing--s { padding-top: 16px; }
.top-internal-spacing--m { padding-top: 32px; }
.top-internal-spacing--l { padding-top: 48px; }
.top-internal-spacing--xl { padding-top: 64px; }

.bottom-internal-spacing--xs { padding-bottom: 10px; }
.bottom-internal-spacing--s { padding-bottom: 16px; }
.bottom-internal-spacing--m { padding-bottom: 32px; }
.bottom-internal-spacing--l { padding-bottom: 48px; }
.bottom-internal-spacing--xl { padding-bottom: 64px; }


@media all and (min-width: 1300px) {
  .top-spacing--xs { margin-top: 24px; }
  .top-spacing--s { margin-top: 32px; }
  .top-spacing--m { margin-top: 64px; }
  .top-spacing--l { margin-top: 96px; }
  .top-spacing--xl { margin-top: 128px; }

  .bottom-spacing--xs { margin-bottom: 24px; }
  .bottom-spacing--s { margin-bottom: 32px; }
  .bottom-spacing--m { margin-bottom: 64px; }
  .bottom-spacing--l { margin-bottom: 96px; }
  .bottom-spacing--xl { margin-bottom: 128px; }

  .top-internal-spacing--xs { padding-top: 24px; }
  .top-internal-spacing--s { padding-top: 32px; }
  .top-internal-spacing--m { padding-top: 64px; }
  .top-internal-spacing--l { padding-top: 96px; }
  .top-internal-spacing--xl { padding-top: 128px; }

  .bottom-internal-spacing--xs { padding-bottom: 24px; }
  .bottom-internal-spacing--s { padding-bottom: 32px; }
  .bottom-internal-spacing--m { padding-bottom: 64px; }
  .bottom-internal-spacing--l { padding-bottom: 96px; }
  .bottom-internal-spacing--xl { padding-bottom: 128px; }
}