{#
 * Component variables
 *
 * props:
 *  layout
 *  media_alignment
 *  background_color
 *
 * slots
 *  headline
 *  body
 *  cta
 *  media
 *
 #}
{% set classes = [
  'ping-pong',
  mediaAlign|clean_class
] %}
<div {{ attributes.addClass(classes) }} style="background-color: {{ bgColor }}">
  {{ title_prefix }}
  {{ title_suffix }}
  <div class="ping-pong__media">
    {% block media %}{% endblock %}
  </div>
  <div class="ping-pong__info">
    <div class="ping-pong__info-inner">
      <div class="ping-pong__info-headline">
        {% block headline %}{% endblock %}
      </div>
      <div class="ping-pong__info-text">
        {% block body %}{% endblock %}
      </div>
      <div class="ping-pong__info-cta">
        {% block cta %}{% endblock %}
      </div>
    </div>
  </div>
</div>