.signupPromo {
  display: flex;
  flex-direction: column;
  height: calc(var(--grid-basis) * 12.5);
  width: calc(var(--grid-basis) * 12.5);
  border: 3px solid black;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  justify-content: center;
  transition: background 100ms;
  margin: 24px;
  grid-area: content;
  justify-self: right;
  z-index: 1;
}

.signupPromo:hover {
  background: #ff1ad9;
}

.signupPromo__title {
  color: black;
  font-size: 22px;
  font-weight: 900;
  padding: 6px;
}

.signupPromo__info {
  padding: 6px;
  color: black;
}

@media (max-device-width: 720px), (max-width: 720px) {
  .signupPromo {
    grid-area: promo;
    margin: 0;
    justify-self: auto;
    height: 100%;
    width: 100%;
  }
}