.hero { row-gap: 34px; }

.hero-text {
  white-space: pre-wrap;
}

.hero-extra-text {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: -8px;
  padding: 22px 24px;
  border: 1px solid rgb(17 19 24 / 18%);
  border-radius: 12px;
  background: rgb(255 255 255 / 38%);
  color: #4f535a;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .hero-extra-text { grid-column: 1; margin-top: 0; }
}

@media (max-width: 560px) {
  .hero-extra-text { padding: 18px; border-radius: 10px; }
}