<section class="section callout">
    <div class="container">
        <div class="grid -columns-12">
            <h3 class="callout__title cell -span-6 -center">Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.</h3>
            <div class="callout__actions cell -span-6 -center">
                <button class="button accent-primary">Default Button</button>
                <button class="button -outline accent-primary">Learn More</button>
            </div>
        </div>
    </div>
</section>

<section class="section callout accent-primary">
    <div class="container">
        <div class="grid -columns-12">
            <h3 class="callout__title cell -span-6 -center">This callout uses .accent-primary.</h3>
            <div class="callout__actions cell -span-6 -center">
                <button class="button accent-white">Default Button</button>
                <button class="button -outline accent-white">Learn More</button>
            </div>
        </div>
    </div>
</section>

<section class="section callout accent-secondary">
    <div class="container">
        <div class="grid -columns-12">
            <h3 class="callout__title cell -span-6 -center">This callout uses .accent-secondary.</h3>
            <div class="callout__actions cell -span-6 -center">
                <button class="button accent-white">Default Button</button>
                <button class="button -outline accent-white">Learn More</button>
            </div>
        </div>
    </div>
</section>

<section class="section callout accent-tertiary">
    <div class="container">
        <div class="grid -columns-12">
            <h3 class="callout__title cell -span-6 -center">This callout uses .accent-tertiary.</h3>
            <div class="callout__actions cell -span-6 -center">
                <button class="button accent-white">Default Button</button>
                <button class="button -outline accent-white">Learn More</button>
            </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);
    }
  }
}