.page-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
}

.title {
  font-size: 27px;
  text-align: left;
  font-weight: 500;
  margin-top: 42px;
  max-width: 400px;
}

.lottie-animation {
  aspect-ratio: 233 / 261;
  max-width: 360px;
}

.zodiac {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -150px;

  & > img {
    height: 100%;
    position: relative;
    z-index: -2;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .7) 10%,
        rgba(255, 255, 255, 1) 15%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 1) 40%,
        rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: -1;
  }
}

.description {
  white-space: pre-line;
  margin-bottom: 24px;
}

.zodiacNew {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  & > img {
    height: 100%;
    position: relative;
    max-width: 260px;
    z-index: -2;
  }
}