:root {
  --x0: 0px;
  --x1: 4px;
  --x2: calc(var(--x1) * 2);
  --x3: calc(var(--x1) * 3);
  --x4: calc(var(--x1) * 4);
  --x5: calc(var(--x1) * 5);
  --x6: calc(var(--x1) * 6);
  --x8: calc(var(--x1) * 8);
  --x9: calc(var(--x1) * 9);
  --x10: calc(var(--x1) * 10);
  --x12: calc(var(--x1) * 12);
  --x15: calc(var(--x1) * 15);
  --x16: calc(var(--x1) * 16);
  --x20: calc(var(--x1) * 20);
  --x23: calc(var(--x1) * 23);
  --x24: calc(var(--x1) * 24);
  --x30: calc(var(--x1) * 30);
  --x32: calc(var(--x1) * 32);
  --x45: calc(var(--x1) * 45);

  --background-card: #1d1f22;

  --color-ffffff: #ffffff;
  --color-04040433: #04040433;
  --color-030F0E: #030f0e;
  --color-827FF4: #827ff4;
  --color-040404: #040404;
  --color-1D1F22: #1d1f22;
  --color-949494: #949494;
  --color-383A3E: #383a3e;

  --desktop: 1440px;
  --tablet: 768px;
  --mobile: 393px;
}