@import "/styles/common.css";

.badge {
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  padding: .25em .75em;
  border-radius: 8px;
  color: var(--background-color);
  font-size: var(--font-system-code-size);
  font-weight: bold;
  text-align: center;
  background: linear-gradient(to bottom,
      rgba(219, 39, 119, 1) 30%,
      rgba(126, 34, 206, 1) 50%,
      rgba(37, 99, 235, 1) 70%);
}

.hero-container {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20em;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .hero-text {
    width: 100%;
    text-align: center;
  }

  .hero-image {
    width: 50em;
  }
}