.htp-hero {
  max-width: 100%;
  background: var(--teal-700);
  padding: var(--spacing-13) var(--spacing-7);
  margin-bottom: 0;
}

.htp-hero__top {
  max-width: var(--max-width);
  margin: 0 auto var(--spacing-9);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-9);
  align-items: end;
  text-align: left;
}

.htp-hero__heading {
  font-family: "Fraunces";
  font-weight: 400;
  font-size: 48px;
  line-height: 100%;
  color: var(--teal-vibrant);
  margin: 0;
}

.htp-hero__intro p {
  font-size: 16px;
  font-weight: 500;
  color: var(--grey-100);
  margin-bottom: var(--spacing-6);
}

.htp-hero__image {
  max-width: var(--max-width);
  margin: 0 auto;
}

.htp-hero__image img {
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

@media (max-width: 900px) {
  .htp-hero__top {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .htp-hero__image img {
    height: 280px;
  }
}