lujanfernaud/prevy

<div class="col-sm-12 col-md-6 col-lg-4 mt-2rem">
  <div class="box group-box" id="group-<%= group.id %>">

    <!-- Group Image -->
    <div class="group-box-image intrinsic-ratio-container card card-inverse text-center">
      <%= image_tag  group.image_base64,
        data: {
          src:       group.samplified_image_url(:thumb),
          srcset: "#{group.samplified_image_url(:medium)} 510w,
                   #{group.samplified_image_url} 730w",
        },
        class: "lazyload blur-up
          intrinsic-ratio-image img-fluid card-img-top" %>

      <a href="<%= group_path(group) %>" class="group-card-link">
        <div class="card-img-overlay accent-border-bottom">
          <div class="card-title mb-0">
            <h2 class="h4 mb-0 ml-1 box-title">
              <%= group.name %>
            </h2>
          </div>
        </div>
      </a>
    </div>

    <div class="group-box-text">
      <!-- Location -->
      <p class="mb-0">
        <%= location_icon %>
        <%= group.location %>
      </p>

      <!-- Members Count -->
      <p class="mt-1 mb-0">
        <%= person_icon %>
        <%= "#{group.members_count} " +
          "member".pluralize(group.members_count) %>
      </p>
    </div>

  </div>
</div>