/* =============================
   MOBILE
   ============================= */

/* ===== MARGIN TOP ===== */
.top-spacing--4   { margin-top: 2px; }
.top-spacing--8   { margin-top: 3px; }
.top-spacing--16  { margin-top: 6px; }
.top-spacing--32  { margin-top: 13px; }
.top-spacing--64  { margin-top: 26px; }
.top-spacing--96  { margin-top: 38px; }
.top-spacing--128 { margin-top: 51px; }

/* ===== MARGIN BOTTOM ===== */
.bottom-spacing--4   { margin-bottom: 2px; }
.bottom-spacing--8   { margin-bottom: 3px; }
.bottom-spacing--16  { margin-bottom: 6px; }
.bottom-spacing--32  { margin-bottom: 13px; }
.bottom-spacing--64  { margin-bottom: 26px; }
.bottom-spacing--96  { margin-bottom: 38px; }
.bottom-spacing--128 { margin-bottom: 51px; }

/* ===== PADDING TOP ===== */
.top-internal-spacing--4   { padding-top: 2px; }
.top-internal-spacing--8   { padding-top: 3px; }
.top-internal-spacing--16  { padding-top: 6px; }
.top-internal-spacing--32  { padding-top: 13px; }
.top-internal-spacing--64  { padding-top: 26px; }
.top-internal-spacing--96  { padding-top: 38px; }
.top-internal-spacing--128 { padding-top: 51px; }

/* ===== PADDING BOTTOM ===== */
.bottom-internal-spacing--4   { padding-bottom: 2px; }
.bottom-internal-spacing--8   { padding-bottom: 3px; }
.bottom-internal-spacing--16  { padding-bottom: 6px; }
.bottom-internal-spacing--32  { padding-bottom: 13px; }
.bottom-internal-spacing--64  { padding-bottom: 26px; }
.bottom-internal-spacing--96  { padding-bottom: 38px; }
.bottom-internal-spacing--128 { padding-bottom: 51px; }



/* =============================
   DESKTOP
   ============================= */

@media (min-width: 1300px) {

  /* ===== MARGIN TOP ===== */
  .top-spacing--4   { margin-top: 4px; }
  .top-spacing--8   { margin-top: 8px; }
  .top-spacing--16  { margin-top: 16px; }
  .top-spacing--32  { margin-top: 32px; }
  .top-spacing--64  { margin-top: 64px; }
  .top-spacing--96  { margin-top: 96px; }
  .top-spacing--128 { margin-top: 128px; }

  /* ===== MARGIN BOTTOM ===== */
  .bottom-spacing--4   { margin-bottom: 4px; }
  .bottom-spacing--8   { margin-bottom: 8px; }
  .bottom-spacing--16  { margin-bottom: 16px; }
  .bottom-spacing--32  { margin-bottom: 32px; }
  .bottom-spacing--64  { margin-bottom: 64px; }
  .bottom-spacing--96  { margin-bottom: 96px; }
  .bottom-spacing--128 { margin-bottom: 128px; }

  /* ===== PADDING TOP ===== */
  .top-internal-spacing--4   { padding-top: 4px; }
  .top-internal-spacing--8   { padding-top: 8px; }
  .top-internal-spacing--16  { padding-top: 16px; }
  .top-internal-spacing--32  { padding-top: 32px; }
  .top-internal-spacing--64  { padding-top: 64px; }
  .top-internal-spacing--96  { padding-top: 96px; }
  .top-internal-spacing--128 { padding-top: 128px; }

  /* ===== PADDING BOTTOM ===== */
  .bottom-internal-spacing--4   { padding-bottom: 4px; }
  .bottom-internal-spacing--8   { padding-bottom: 8px; }
  .bottom-internal-spacing--16  { padding-bottom: 16px; }
  .bottom-internal-spacing--32  { padding-bottom: 32px; }
  .bottom-internal-spacing--64  { padding-bottom: 64px; }
  .bottom-internal-spacing--96  { padding-bottom: 96px; }
  .bottom-internal-spacing--128 { padding-bottom: 128px; }

}