:root {
  --color-background-base: #151723;
  --color-background-surface: #232737;
  --color-background-secondary-surface: #393f56;
  --color-background-highlight: #51576c;
  --color-background-inverted: #fff;
  --color-background-accent-positive: #0c8df8;
  --color-background-positive: #53bb48;
  --color-background-warning: #ff8f00;
  --color-background-accent-negative: #82889b;
  --color-background-negative: #ee6b4e;
  --color-stroke-divider: #51576c;
  --color-stroke-active: #51576c;
  --color-stroke-secondary-active: #393f56;
  --color-stroke-highlight: #82889b;
  --color-stroke-inactive: #232737;
  --color-stroke-accent: #f4f4f6;
  --color-stroke-accent-color: #0c8df8;
  --color-stroke-positive: #53bb48;
  --color-stroke-warning: #ff8f00;
  --color-stroke-negative: #ee6b4e;
  --color-text-primary: #f4f4f6;
  --color-text-secondary: #82889b;
  --color-text-inactive: #51576c;
  --color-text-inverted: #151723;
  --color-text-button-primary: #fff;
  --color-text-button-secondary: #f4f4f6;
  --color-text-button-inactive: #82889b;
  --color-text-accent: #0c8df8;
  --color-text-positive: #53bb48;
  --color-text-warning: #ff8f00;
  --color-text-negative: #ee6b4e;
  --color-text-link: #48a9fa;
  --color-icon-primary-active: #f4f4f6;
  --color-icon-primary-highlight: #82889b;
  --color-icon-primary-inactive: #51576c;
  --color-icon-secondary-active: #82889b;
  --color-icon-secondary-highlight: #f4f4f6;
  --color-icon-secondary-inactive: #51576c;
  --color-icon-button-dark: #151723;
  --color-icon-button-light: #fff;
  --color-icon-button-inactive: #82889b;
  --color-icon-inverted: #232737;
  --color-icon-primary-accent: #0c8df8;
  --color-icon-positive: #53bb48;
  --color-icon-negative: #ee6b4e;
  --color-icon-warning: #ff8f00;
  --color-icon-secondary-accent: #ff8f00;
  --color-button-negative-active: #ee6b4e;
  --color-button-negative-highlight: #f49e8b;
  --color-button-negative-inactive: #741e0b;
  --color-button-primary-active: #0c8df8;
  --color-button-primary-highlight: #ffefa3;
  --color-button-primary-inactive: #a38600;
  --color-button-positive-active: #53bb48;
  --color-button-positive-highlight: #8fd388;
  --color-button-positive-inactive: #2b6425;
  --color-button-secondary-active: #ff8f00;
  --color-button-secondary-highlight: #ffbc66;
  --color-button-secondary-inactive: #995600;
  --color-button-neutral-active: #51576c;
  --color-button-neutral-highlight: #666d85;
  --color-button-neutral-inactive: #151723;
  --color-button-inverted: #f4f4f6;
  --color-control-active: #0c8df8;
  --color-control-highlight: #48a9fa;
  --color-control-inactive: #033a68;
  --color-opacity-base: 255, 255, 255;
  --color-opacity-base-inverted: 18, 18, 18;
}

.lp-font-black-3xl {
  font-size: calc(100vw / 360 * 40);
  line-height: calc(100vw / 360 * 48);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-2xl {
  font-size: calc(100vw / 360 * 34);
  line-height: calc(100vw / 360 * 42);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-xl {
  font-size: calc(100vw / 360 * 32);
  line-height: calc(100vw / 360 * 40);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-l {
  font-size: calc(100vw / 360 * 30);
  line-height: calc(100vw / 360 * 38);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-m {
  font-size: calc(100vw / 360 * 28);
  line-height: calc(100vw / 360 * 36);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-s {
  font-size: calc(100vw / 360 * 26);
  line-height: calc(100vw / 360 * 34);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-xs {
  font-size: calc(100vw / 360 * 24);
  line-height: calc(100vw / 360 * 32);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-2xs {
  font-size: calc(100vw / 360 * 22);
  line-height: calc(100vw / 360 * 30);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-black-3xs {
  font-size: calc(100vw / 360 * 20);
  line-height: calc(100vw / 360 * 28);
  font-family: "NunitoSans Black", sans-serif;
}
.lp-font-bold-3xl {
  font-size: calc(100vw / 360 * 30);
  line-height: calc(100vw / 360 * 38);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-2xl {
  font-size: calc(100vw / 360 * 28);
  line-height: calc(100vw / 360 * 36);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-xl {
  font-size: calc(100vw / 360 * 26);
  line-height: calc(100vw / 360 * 34);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-l {
  font-size: calc(100vw / 360 * 24);
  line-height: calc(100vw / 360 * 32);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-m {
  font-size: calc(100vw / 360 * 22);
  line-height: calc(100vw / 360 * 30);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-s {
  font-size: calc(100vw / 360 * 20);
  line-height: calc(100vw / 360 * 28);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-xs {
  font-size: calc(100vw / 360 * 18);
  line-height: calc(100vw / 360 * 24);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-2xs {
  font-size: calc(100vw / 360 * 16);
  line-height: calc(100vw / 360 * 20);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-bold-3xs {
  font-size: calc(100vw / 360 * 14);
  line-height: calc(100vw / 360 * 20);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-regular-3xl {
  font-size: calc(100vw / 360 * 30);
  line-height: calc(100vw / 360 * 38);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-2xl {
  font-size: calc(100vw / 360 * 28);
  line-height: calc(100vw / 360 * 36);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-xl {
  font-size: calc(100vw / 360 * 26);
  line-height: calc(100vw / 360 * 34);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-l {
  font-size: calc(100vw / 360 * 24);
  line-height: calc(100vw / 360 * 32);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-m {
  font-size: calc(100vw / 360 * 22);
  line-height: calc(100vw / 360 * 30);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-s {
  font-size: calc(100vw / 360 * 20);
  line-height: calc(100vw / 360 * 28);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-xs {
  font-size: calc(100vw / 360 * 18);
  line-height: calc(100vw / 360 * 24);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-2xs {
  font-size: calc(100vw / 360 * 16);
  line-height: calc(100vw / 360 * 20);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-regular-3xs {
  font-size: calc(100vw / 360 * 14);
  line-height: calc(100vw / 360 * 20);
  font-family: "NunitoSans Regular", sans-serif;
}
.lp-font-accent-bold-XL {
  font-size: calc(100vw / 360 * 64);
  line-height: calc(100vw / 360 * 72);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-accent-bold-L {
  font-size: calc(100vw / 360 * 56);
  line-height: calc(100vw / 360 * 64);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-accent-bold-M {
  font-size: calc(100vw / 360 * 48);
  line-height: calc(100vw / 360 * 56);
  font-family: "NunitoSans Bold", sans-serif;
}
.lp-font-accent-bold-S {
  font-size: calc(100vw / 360 * 42);
  line-height: calc(100vw / 360 * 48);
  font-family: "NunitoSans Bold", sans-serif;
}
@media (min-width: 768px) {
  .lp-font-black-3xl {
    font-size: calc(100vw / 1728 * 88);
    line-height: calc(100vw / 1728 * 96);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-2xl {
    font-size: calc(100vw / 1728 * 80);
    line-height: calc(100vw / 1728 * 88);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-xl {
    font-size: calc(100vw / 1728 * 72);
    line-height: calc(100vw / 1728 * 80);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-l {
    font-size: calc(100vw / 1728 * 64);
    line-height: calc(100vw / 1728 * 72);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-m {
    font-size: calc(100vw / 1728 * 56);
    line-height: calc(100vw / 1728 * 64);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-s {
    font-size: calc(100vw / 1728 * 48);
    line-height: calc(100vw / 1728 * 56);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-xs {
    font-size: calc(100vw / 1728 * 40);
    line-height: calc(100vw / 1728 * 48);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-2xs {
    font-size: calc(100vw / 1728 * 32);
    line-height: calc(100vw / 1728 * 40);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-black-3xs {
    font-size: calc(100vw / 1728 * 24);
    line-height: calc(100vw / 1728 * 32);
    font-family: "NunitoSans Black", sans-serif;
  }
  .lp-font-bold-3xl {
    font-size: calc(100vw / 1728 * 64);
    line-height: calc(100vw / 1728 * 72);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-2xl {
    font-size: calc(100vw / 1728 * 56);
    line-height: calc(100vw / 1728 * 64);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-xl {
    font-size: calc(100vw / 1728 * 48);
    line-height: calc(100vw / 1728 * 56);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-l {
    font-size: calc(100vw / 1728 * 40);
    line-height: calc(100vw / 1728 * 48);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-m {
    font-size: calc(100vw / 1728 * 32);
    line-height: calc(100vw / 1728 * 40);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-s {
    font-size: calc(100vw / 1728 * 24);
    line-height: calc(100vw / 1728 * 32);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-xs {
    font-size: calc(100vw / 1728 * 20);
    line-height: calc(100vw / 1728 * 28);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-2xs {
    font-size: calc(100vw / 1728 * 18);
    line-height: calc(100vw / 1728 * 24);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-bold-3xs {
    font-size: calc(100vw / 1728 * 16);
    line-height: calc(100vw / 1728 * 22);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-regular-3xl {
    font-size: calc(100vw / 1728 * 64);
    line-height: calc(100vw / 1728 * 72);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-2xl {
    font-size: calc(100vw / 1728 * 56);
    line-height: calc(100vw / 1728 * 64);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-xl {
    font-size: calc(100vw / 1728 * 48);
    line-height: calc(100vw / 1728 * 56);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-l {
    font-size: calc(100vw / 1728 * 40);
    line-height: calc(100vw / 1728 * 48);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-m {
    font-size: calc(100vw / 1728 * 32);
    line-height: calc(100vw / 1728 * 40);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-s {
    font-size: calc(100vw / 1728 * 24);
    line-height: calc(100vw / 1728 * 32);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-xs {
    font-size: calc(100vw / 1728 * 20);
    line-height: calc(100vw / 1728 * 28);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-2xs {
    font-size: calc(100vw / 1728 * 18);
    line-height: calc(100vw / 1728 * 24);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-regular-3xs {
    font-size: calc(100vw / 1728 * 16);
    line-height: calc(100vw / 1728 * 22);
    font-family: "NunitoSans Regular", sans-serif;
  }
  .lp-font-accent-bold-XL {
    font-size: calc(100vw / 1728 * 140);
    line-height: calc(100vw / 1728 * 140);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-accent-bold-L {
    font-size: calc(100vw / 1728 * 120);
    line-height: calc(100vw / 1728 * 120);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-accent-bold-M {
    font-size: calc(100vw / 1728 * 110);
    line-height: calc(100vw / 1728 * 110);
    font-family: "NunitoSans Bold", sans-serif;
  }
  .lp-font-accent-bold-S {
    font-size: calc(100vw / 1728 * 96);
    line-height: calc(100vw / 1728 * 96);
    font-family: "NunitoSans Bold", sans-serif;
  }
}

:root {
  --border-width-xs: 1;
  --border-width-s: 2;
  --border-width-m: 3;
  --border-width-l: 4;
  --border-radius-xxs: 2;
  --border-radius-xs: 4;
  --border-radius-s: 6;
  --border-radius-m: 8;
  --border-radius-ml: 10;
  --border-radius-l: 12;
  --border-radius-xl: 14;
  --border-radius-2xl: 16;
  --border-radius-3xl: 18;
  --border-radius-4xl: 20;
  --border-radius-round: 50%;
}

:root {
  --offset-sm-xs: 4;
  --offset-sm-s: 8;
  --offset-sm-l: 16;
  --offset-md-2xs: 24;
  --offset-md-s: 32;
  --offset-md-l: 40;
  --offset-md-2xl: 48;
  --offset-lg-s: 56;
  --offset-lg-l: 64;
  --offset-lg-2xl: 72;
  --height-sm-2xs: 4;
  --height-sm-4xs: 8;
  --height-sm-s: 16;
  --height-sm-l: 24;
  --height-md-2xs: 32;
  --height-md-s: 40;
  --height-md-l: 48;
  --height-md-2xl: 56;
  --height-lg-s: 64;
  --height-lg-l: 72;
  --height-lg-2xl: 80;
  --height-xl-2xs: 88;
  --height-xl-s: 96;
  --height-xl-l: 104;
  --height-xl-2xl: 200;
  --width-sm-2xs: 4;
  --width-sm-s: 8;
  --width-sm-l: 16;
  --width-md-2xs: 24;
  --width-md-s: 32;
  --width-md-l: 40;
  --width-md-2xl: 48;
  --width-lg-s: 56;
  --width-lg-l: 64;
  --width-lg-2xl: 72;
  --width-xl-2xs: 80;
  --width-xl-s: 88;
  --width-xl-l: 96;
  --width-xl-2xl: 104;
  --width-xl-3xl: 200;
  --width-mobile-xs: 288;
  --width-mobile-s: 512;
  --width-tablet-s: 688;
  --width-tablet-m: 944;
  --width-laptop-l: 1104;
  --width-desktop-xl: 1264;
  --width-full: 100%;
}

html,
body {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: fixed;
  overscroll-behavior: none;
  margin: 0;
}

.btn {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  border-radius: calc(100vw / 360 * 12);
  background: linear-gradient(90deg, var(--palette-green-bright, #01ff00) 0%, var(--palette-green, #14c679) 100%);
  box-shadow: 0 10px 60px 0 var(--palette-green-dark, #0b6b41);
  color: #ebebeb;
  cursor: pointer;
  text-decoration: none;
}

.webp-supported .btn {
  background: linear-gradient(90deg, var(--palette-green-bright, #01ff00) 0%, var(--palette-green, #14c679) 100%);
}

.webp-supported .btn {
  background: linear-gradient(90deg, var(--palette-green-bright, #01ff00) 0%, var(--palette-green, #14c679) 100%);
}
@media (min-width: 768px) {
  .btn {
    border-radius: calc(100vw / 1728 * 12);
  }
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: calc(100vw / 360 * 0);
  padding: calc(100vw / 360 * 32) calc(100vw / 360 * 16);
  box-sizing: border-box;
  gap: calc(100vw / 360 * 8);
}
@media (min-width: 768px) {
  header {
    margin-bottom: calc(100vw / 1728 * 8);
  }
}
@media (min-width: 768px) {
  header {
    padding: calc(100vw / 1728 * 40) calc(100vw / 1728 * 32);
  }
}
@media (min-width: 768px) {
  header {
    gap: calc(100vw / 1728 * 16);
  }
}
header .title,
header .subtitle {
  color: #ebebeb;
  margin: 0;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .wheel {
  position: relative;
  width: calc(100vw / 360 * 350);
  height: calc(100vw / 360 * 350);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .content .wheel {
    width: calc(100vw / 1728 * 700);
  }
}
@media (min-width: 768px) {
  .content .wheel {
    height: calc(100vw / 1728 * 700);
  }
}
.content .wheel .prize-wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vw / 360 * 320);
  height: calc(100vw / 360 * 320);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 3s ease;
  will-change: transform;
}
@media (min-width: 768px) {
  .content .wheel .prize-wheel {
    width: calc(100vw / 1728 * 640);
  }
}
@media (min-width: 768px) {
  .content .wheel .prize-wheel {
    height: calc(100vw / 1728 * 640);
  }
}
.content .wheel .prize-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.content .wheel .wheel-btn {
  position: absolute;
  top: 50%;
  left: 53%;
  width: calc(100vw / 360 * 100);
  height: calc(100vw / 360 * 80);
  transform: translate(-50%, -50%);
  z-index: 20;
}
@media (min-width: 768px) {
  .content .wheel .wheel-btn {
    width: calc(100vw / 1728 * 200);
  }
}
@media (min-width: 768px) {
  .content .wheel .wheel-btn {
    height: calc(100vw / 1728 * 160);
  }
}
.content .wheel .wheel-title-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  z-index: 25;
  cursor: pointer;
}
.content .add-spin-btn {
  padding: calc(100vw / 360 * 10) calc(100vw / 360 * 64);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .content .add-spin-btn {
    padding: calc(100vw / 1728 * 24) calc(100vw / 1728 * 80);
  }
}

footer .background {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  z-index: -1;
  background-image: url(../landings/stockity/src/transit_3/images/bg.webp);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.webp-supported footer .background {
  background-image: url(../landings/stockity/src/transit_3/images/bg.webp);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.webp-supported footer .background {
  background-image: url(../landings/stockity/src/transit_3/images/bg.webp);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--width-full);
  height: 100%;
  overflow: hidden;
  background: rgba(18, 18, 18, 0.7);
  backdrop-filter: blur(5px);
  z-index: 999;
}

.webp-supported .modal-container {
  background: rgba(18, 18, 18, 0.7);
}

.webp-supported .modal-container {
  background: rgba(18, 18, 18, 0.7);
}
.modal-container .modal {
  padding: calc(100vw / 360 * 16) calc(100vw / 360 * 16);
  box-sizing: border-box;
  border-radius: calc(100vw / 360 * 12);
  width: calc(100vw / 360 * 544);
  height: calc(100vw / 360 * 392);
  background-color: #262626;
}
@media (min-width: 768px) {
  .modal-container .modal {
    padding: calc(100vw / 1728 * 16) calc(100vw / 1728 * 24);
  }
}
@media (min-width: 768px) {
  .modal-container .modal {
    border-radius: calc(100vw / 1728 * 12);
  }
}
@media (min-width: 768px) {
  .modal-container .modal {
    width: calc(100vw / 1728 * 544);
  }
}
@media (min-width: 768px) {
  .modal-container .modal {
    height: calc(100vw / 1728 * 392);
  }
}
.modal-container .modal__header {
  height: calc(100vw / 360 * 24);
}
@media (min-width: 768px) {
  .modal-container .modal__header {
    height: calc(100vw / 1728 * 24);
  }
}
.modal-container .modal__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: calc(100vw / 360 * 0);
  gap: calc(100vw / 360 * 32);
}
@media (min-width: 768px) {
  .modal-container .modal__content {
    margin-bottom: calc(100vw / 1728 * 32);
  }
}
@media (min-width: 768px) {
  .modal-container .modal__content {
    gap: calc(100vw / 1728 * 32);
  }
}
.modal-container .modal__content .coin {
  width: calc(100vw / 360 * 64);
  height: calc(100vw / 360 * 64);
}
@media (min-width: 768px) {
  .modal-container .modal__content .coin {
    width: calc(100vw / 1728 * 96);
  }
}
@media (min-width: 768px) {
  .modal-container .modal__content .coin {
    height: calc(100vw / 1728 * 96);
  }
}
.modal-container .modal__content .description {
  color: #ebebeb;
  margin: 0;
}
.modal-container .modal__footer {
  display: flex;
  justify-content: center;
  width: 100%;
}
.modal-container .modal__footer .registration-btn {
  padding: calc(100vw / 360 * 10) calc(100vw / 360 * 64);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .modal-container .modal__footer .registration-btn {
    padding: calc(100vw / 1728 * 10) calc(100vw / 1728 * 64);
  }
}

.hidden {
  display: none;
}

@media (max-width: 767px) {
  .add-spin-btn {
    margin: calc(100vw / 360 * 0) calc(100vw / 360 * 16);
    width: 100%;
  }
}
@media (max-width: 767px) and (min-width: 768px) {
  .add-spin-btn {
    margin: calc(100vw / 1728 * 0) calc(100vw / 1728 * 16);
  }
}
@media (max-width: 767px) {
  .wheel-title-btn {
    font-size: 20px;
    line-height: 28px;
  }
  .modal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 100% !important;
  }
  .modal__footer .registration-btn {
    width: 100%;
  }
}