.hero {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-double);
  text-align: center;
  padding: var(--block-space-double) var(--inline-space-double);
}

.hero__section {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  align-items: center;
}

.hero__image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-rule {
  width: 1px;
  height: 2rem;
  background-color: black;
  display: inline-block;
}

.hero--contrast {
  background-color: var(--color-blue-extra-light);
}

.hero--red {
  background-color: var(--color-red-medium);
  color: white;

  .dollar-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cta button {
    margin-bottom: var(--block-space)
  }
}

.pronunciation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--inline-space);
}