<div class="callout 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">Default Button</button>
                <button class="button -outline">Learn More</button>
            </div>
        </div>
    </div>
</div>

.callout {
  background: var(--color-gray-100);
  padding: 5rem 0;

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

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