.buddy-hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
}

.buddy-demo {
  border-radius: 34px;
}

.demo-fish-canvas {
  position: absolute;
  left: 50%;
  top: 24%;
  width: min(88%, 420px);
  height: auto;
  aspect-ratio: 7 / 4;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 17px #001b2b80);
}

.personality-fish {
  display: block;
  width: min(100%, 260px);
  height: auto;
  aspect-ratio: 26 / 15;
  margin: 0 auto 7px;
  filter: drop-shadow(0 11px 10px #16354529);
}

.buddy-demo > p {
  top: 8%;
  right: 5%;
  max-width: min(210px, 64%);
  white-space: normal;
  text-align: center;
}

.buddy-demo > small {
  right: 5%;
  bottom: 6%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid #65d5e755;
  border-radius: 999px;
  background: #071f2fcc;
  color: #c3dadd;
  font-size: 11px;
}

.buddy-demo > small b {
  color: #d5ff5f;
  font-size: 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

@media (max-width: 850px) {
  .buddy-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .demo-fish-canvas {
    left: 50%;
    top: 28%;
    width: min(92%, 360px);
  }

  .buddy-demo > p {
    top: 8%;
    right: 16px;
    left: 16px;
    max-width: none;
  }

  .buddy-demo > small {
    right: 50%;
    bottom: 5%;
    width: max-content;
    max-width: calc(100% - 28px);
    transform: translateX(50%);
  }
}