.captions-hero-section {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 6em 8em 4em;
  display: grid;
  place-items: center;
  gap: 0.5em;
  text-align: center;

  @media (max-width: 768px) {
      padding: 6em 2em 2em;

  }

  .captions-hero-subtitle {
    max-width: 550px;
  }

  h1 {
    max-width: 1000px;
    margin-bottom: 0.2em;
  }

  img {
    margin-bottom: 2rem;
  }

  span > strong {
    color: var(--green-pea-light);
  }

  button {
    margin-block: 2em;
  }

  video {
    margin-top: 3em;
    border-radius: 1.5rem;
  }
}

.captions-hero-hearts {
  svg {
    color: var(--green-pea-light);
  }
}