.mascot {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.mascot--hero {
  z-index: 4;
  right: max(-110px, calc((var(--container) - 100vw) / 2 + 16px));
  bottom: 0;
  width: 220px;
}

.mascot--shot-end,
.mascot--shot-start {
  bottom: -104px;
  width: 180px;
}

.mascot--shot-end {
  right: max(-120px, calc((var(--container) - 100vw) / 2 + 16px));
}

.mascot--shot-start {
  left: max(-120px, calc((var(--container) - 100vw) / 2 + 16px));
}

.mascot--peek,
.mascot--stand {
  position: relative;
  align-self: flex-end;
  width: auto;
  margin-right: var(--space-2xl);
}

.mascot--peek {
  z-index: 0;
  height: 152px;
  margin-bottom: -18px;
}

.mascot--stand {
  z-index: 2;
  height: 140px;
  margin-bottom: -6px;
}

.mascot--cta {
  bottom: 0;
  left: max(var(--space-lg), 5%);
  z-index: 0;
  width: 220px;
}

.mascot--steps {
  position: static;
  display: block;
  width: min(100%, 560px);
  margin-top: var(--space-md);
  margin-inline: auto;
}

.mascot--faq {
  position: static;
  width: 180px;
  margin-top: var(--space-lg);
}

@media (min-width: 1920px) {
  .mascot--hero {
    width: 250px;
  }

  .mascot--shot-end,
  .mascot--shot-start {
    width: 220px;
  }
}

@media (max-width: 1280px) {
  .mascot--cta {
    width: 170px;
  }

  .mascot--hero {
    width: 180px;
  }

  .mascot--shot-end,
  .mascot--shot-start {
    width: 150px;
  }
}

@media (max-width: 1024px) {
  .mascot--cta {
    width: 130px;
  }

  .mascot--shot-end,
  .mascot--shot-start {
    right: -8px;
    bottom: -56px;
    left: auto;
    width: 140px;
  }

  .mascot--faq {
    display: none;
  }
}

@media (max-width: 767px) {
  .mascot--hero,
  .mascot--cta {
    display: none;
  }

  .mascot--shot-end,
  .mascot--shot-start {
    bottom: -32px;
    width: 110px;
  }

  .mascot--peek,
  .mascot--stand {
    margin-right: var(--space-lg);
  }

  .mascot--peek {
    height: 112px;
    margin-bottom: -14px;
  }

  .mascot--stand {
    height: 102px;
    margin-bottom: -4px;
  }
}