{% for event in site.data.events %}

<section class="container content-section">
  {% if site.data.events.size == 1 %}
  <div class="row justify-content-center">
  {% else %}
  <div class="row {% cycle 'justify-content-start', 'justify-content-end' %}">
  {% endif %}
    <div class="col-lg-7 col-sm-8">
      <h2>
        {{ event.name }}
        <br>
        <small class="text-muted wrap-whitespace date-subheader">
          {% if event.date %}
            {{ event.date | date: '%A, %B %e, %Y' }} | {{ event.date | date: '%l:%M %p' }}
          {% else %}
            {{ event.date_alt }}
          {% endif %}
        </small>
      </h2>
      <div class="d-flex justify-content-between align-items-center">
        <address class="col-xs-8 ">
          {% if event.location_name %}
          <strong>{{ event.location_name }}</strong><br>
          {% endif %}
          {% if event.location.google_maps_url %}
          <a href="{{ event.location.google_maps_url }}">
            {{ event.location.address }}<br>
            {{ event.location.city }}, {{ event.location.state }} {{ event.location.zip }}<br>
          </a>
          {% endif %}
        </address>
        <dl class="col-xs-4">
          <dt>Attire</dt>
          <dd>{{ event.attire | capitalize }}</dd>
        </dl>
      </div>
      <p>{{ event.description }}</p>
      {% if event.transportation %}
        <p><em>{{ event.transportation }}</em></p>
      {% endif %}
      {% if event.shuttle %}
        <p><em>{{ event.shuttle }}</em></p>
      {% endif %}
    </div>
  </div>
</section>

{% endfor %}