<section class="section callout">
  <div class="container">
    <div class="grid -columns-2">
      <picture class="cell">
        <img src="https://unsplash.it/1000/500?random&gravity=center" alt="" />
      </picture>
      <div class="cell">
        <h3 class="callout__title">Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.</h3>
        <div class="callout__actions">
          <button class="button accent-primary">Default Button</button>
          <button class="button -outline accent-primary">Learn More</button>
        </div>
      </div>
    </div>
  </div>
</section>

.callout {
  text-align: center;

  &__title {
    justify-self: center;
    text-align: center;
  }

  &__content {
    text-wrap: balance;
  }

  &__actions {
    justify-self: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
  }

  .grid {
    align-items: center;
  }

  // When buttons have accent-white, use the section's accent color for text
  &.accent-secondary {
    .button.accent-white {
      --accent-color-text: var(--color-blue);
    }
  }

  &.accent-tertiary {
    .button.accent-white {
      --accent-color-text: var(--color-aqua);
    }
  }
}