.hero__image img {
  width: 100%;
}

.hero__content > p {
  font-family: var(--h4-font);
  font-size: var(--h4-font-size--mobile);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  text-transform: var(--h4-text-transform);
}

.hero__content :last-child {
  margin-bottom: 0;
}

.hero__content + .hero__button {
  margin-top: var(--spacer);
}

@media screen and (min-width: 768px) {
  .hero__image {
    order: 2;
  }

  .hero__content {
    order: 1;
  }

  .hero__content > p {
    font-size: var(--h4-font-size);
  }
}