@keyframes SignupBenefits-appear-left {
  from {
    transform: translate(-50%, 0, 0);
  }

  to {
    transform: translate(0, 0, 0);
  }
}

@keyframes SignupBenefits-appear-down {
  from {
    transform: translate(0, -50%, 0);
  }

  to {
    transform: translate(0, 0, 0);
  }
}

.SignupBenefits {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
  margin: 0;
  padding: var(--space-5x);
  list-style: none;

  border-radius: var(--border-radius);

  margin-left: -var(--border-radius);
  width: 300px;

  animation-name: SignupBenefits-appear-left;
  animation-duration: var(--velocity);
  animation-timing-function: cubic-bezier(0.425, 1.65, 0, 0.845);
}

.SignupBenefits-benefit {
  display: flex;
  margin-bottom: var(--space-3x);
}

.SignupBenefits-icon {
  flex: 0 0 var(--space-3x);
  margin-right: var(--space);
}

@media (max-width: 863px) {
  .SignupBenefits {
    margin-top: -var(--border-radius);
    margin-right: 4px;
    margin-bottom: 4px;
    margin-left: 4px;

    width: auto;
    max-width: 440px;

    animation-name: SignupBenefits-appear-down;
  }
}