{#
 * Component variables
 *
 * props:
 *  layout
 *  mediaAlign
 *  bgColor
 *
 * slots
 *  headline
 *  body
 *  cta
 *  media
 *
 #}
{% set align = content.field_ping_pong_media_alignment.0['#markup'] %}
{% set bgColor = content.field_ping_pong_background_color.0['#markup']|default('#fff') %}
<div {{ attributes.addClass('ping-pong-wrapper') }}>
  {{ title_prefix }}
  {{ title_suffix }}

  {% embed 'dc_components:ping-pong' with {
    mediaAlign: align,
    bgColor: bgColor,
  }%}

    {% block headline %}
      <h2>{{ label }}</h2>
    {% endblock%}

    {% block body %}
      {{ content.field_ping_pong_body }}
    {% endblock %}

    {% block cta %}
      {{ content.field_ping_pong_cta }}
    {% endblock %}

    {% block media %}
      {{ content.field_ping_pong_media_items }}
    {% endblock %}

  {% endembed %}

</div>