---
title:
  type: 'string'
description:
  type: 'string'
image:
  type: 'hash'
star:
  type: 'integer'
url:
  type: 'string'
grid_breakpoints:
  type: 'array'
  default:
  - 100
---
<div class="card mb-3">
  <div class="d-flex align-items-center justify-content-center g-0">
    <div class="d-flex">
      {%
        render 'responsive_image.html',
        image:,
        img_class: 'w-100px w-md-150px border border-3 border-secondary rounded-3',
        grid_breakpoints:
      %}
    </div>
    <div class="d-flex w-100 ps-4">
      <div class="card-body d-flex flex-column justify-content-between h-100">
        <p class="card-title fw-bold fs-3 text-capitalize">
          <a href="{{ url | component_escape }}">
            {{- title -}}
          </a>
        </p>

        <p class="card-text fst-italic">
          {{- description | truncatewords: 16, '…' -}}
        </p>

        {% assign rating = star %}

        <div class="stars d-flex align-items-center justify-content-start">
          {% for i in (1..5) %}
            <svg
              class="star w-35px px-1{% if rating != 0 and i <= rating %} filled{% endif %}"
              viewBox="0 0 12.491 11.984"
            >
              <g transform="translate(-74.484 -131.76)">
                <path
                  transform="rotate(-7.9572 -770.9 9164.7)"
                  d="m1327.7 342.05c0.3406-0.10409-2.7556 2.2075-2.8948 2.4989-0.1277 0.26714 0.2922 3.3805 0.024 3.5064-0.2922 0.13731-2.951-1.9386-3.2711-1.981-0.2935-0.0389-3.1247 1.3226-3.3272 1.1066-0.221-0.23554 0.9317-3.4056 0.8732-3.7232-0.054-0.29118-2.2235-2.5631-2.0807-2.8224 0.1558-0.28288 3.5269-0.16621 3.8108-0.32006 0.2604-0.14106 1.7506-2.9066 2.0414-2.851 0.3171 0.0607 1.2479 3.3029 1.482 3.5254 0.2146 0.20399 3.3422 1.0606 3.3422 1.0606z"
                  fill="currentColor"
                  fill-opacity="0"
                  stroke="{% if rating == 0 %}#c3c3c3{% else %}currentColor{% endif %}"
                  stroke-width="1.4"
                  stroke-linecap="square"
                  style="paint-order:fill markers stroke"
                />
              </g>
            </svg>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>