.hero__play {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 2px;
  color: #fff;
  background: rgba(7, 11, 12, .65);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.hero__play[hidden] { display: none; }
.hero__play:hover, .hero__play:focus-visible {
  border-color: var(--brand-orange);
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
}