<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);
    }
  }
}