Page Header Event Details: Multiple Date Times

<div class="c-event-details o-container" data-bkg-theme="base">
  <h2 class="u-sr-only">Information</h2>
  <div class="o-row c-event-details__row">

    <div class="c-event-details__col c-event-details__col--dates o-col o-col-xs-6 o-col-md-3">
      <h3 class="u-sr-only">Dates</h3>
      <div class="c-event-details__icon" aria-hidden="true">
        {% include "03-icons/calendar-event" %}
      </div>
      <div class="c-event-details__content">
        {% for date in dates %}
          {% if loop.index < 4 %}
            <p class="f-text--small c-event-details__date"><strong>{{ date.day }}</strong>
              {% for time in date.times %}
                <br />{{ time }}
              {% endfor %}
            </p>
          {% endif %}
        {% endfor %}
        {% if dates|length > 3 %}
          {% embed "04-objects/accordion" with {
            buttonClasses: 'o-btn',
            classes: 'c-event-details__accordion',
            btnAfter: true
          } %}
            {% block buttonContent %}
              <span class="f-text--cta c-event-details__accordion-text c-event-details__accordion-text--closed">
                View All Dates
                <span class="c-event-details__accordion-icon" aria-hidden="true">
                  {% include "03-icons/plus" %}
                </span>
              </span>
              <span class="f-text--cta c-event-details__accordion-text c-event-details__accordion-text--open">
                View Less Dates
                <span class="c-event-details__accordion-icon" aria-hidden="true">
                  {% include "03-icons/minus" %}
                </span>
              </span>
            {% endblock buttonContent %}
            {% block accordionContent %}
              {% for date in dates %}
                {% if loop.index > 3 %}
                  <p class="f-text--small c-event-details__date"><strong>{{ date.day }}</strong><br />{{ date.time }}</p>
                {% endif %}
              {% endfor %}
            {% endblock accordionContent %}

          {% endembed %}
        {% endif %}
      </div>
    </div>

    {% if location.title or location.address_line_one or location.address_line_two %}
      <div class="c-event-details__col c-event-details__col--location o-col o-col-xs-6 o-col-md-3">
        <h3 class="u-sr-only">Location</h3>
        <div class="c-event-details__icon" aria-hidden="true">
          {% include "03-icons/location-event" %}
        </div>
        <div class="c-event-details__content">
          <p class="f-text--small c-event-details__location"><strong>{{ location.title }}</strong>
            {% if location.address_line_one %}<br />{{ location.address_line_one }}{% endif %}
            {% if location.address_line_two %}<br />{{ location.address_line_two }}{% endif %}
          </p>
        </div>
      </div>
    {% endif %}

    {% if cost %}
      <div class="c-event-details__col c-event-details__col--cost o-col o-col-xs-6 o-col-md-3">
        <h3 class="u-sr-only">Cost</h3>
        <div class="c-event-details__icon" aria-hidden="true">
          {% include "03-icons/dollar-event" %}
        </div>
        <div class="c-event-details__content">
          {% for item in cost %}
            <p class="f-text--small c-event-details__cost"><strong>{{ item.title }}{% if item.amount %}:{% endif %}</strong>
              {% if item.amount %}${{ item.amount }}{% endif %}
            </p>
          </p>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if ctaLink %}
      {% set ctaText = ctaTitle is defined ? ctaTitle : 'Register' %}
      <div class="c-event-details__col c-event-details__col--cta o-col o-col-xs-6 o-col-md-3">
        <div class="c-event-details__cta">
          <a href="{{ ctaLink }}" class="o-btn o-btn--primary" target="blank">{{ ctaText }}</a>
        </div>
      </div>
    {% endif %}
  </div>
  <div class="o-row">
    <div class="o-col">
      <div class="c-event-details__sep"></div>
    </div>
  </div>
</div>