.hero .horizontal-rule::before,
.hero .horizontal-rule::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background-color: var(--color-light);
}

.hero .vertical-rule,
.hero .order-first {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero .order-first {
  align-items: center;
}

.hero__copy {
  padding: 24px 0;
}

@media (min-width: 768px) {
  .hero .horizontal-rule::after {
    order: 6;
  }

  .hero__copy {
    padding-right: 48px;
  }

  .hero .vertical-rule {
    border-right: 1px solid var(--color-light);
    margin-right: -1px;
  }
}

@media (max-width: 767px) {
  .hero {
    padding: 40px 24px;
    text-align: center;
  }

  .hero img {
    width: 150px;
    margin: 0 auto;
  }
}