
{% extends "default.html" %}
{% block content %}

<div class="row row-cols-1 row-cols-md-3 g-4 px-1 py-2">
    {% for content_item in content_items %}
    <div class="col mb-3">
      <div class="card h-100" style="border-radius: 5px;">
        <img src="{{ content_item.image }}" alt="{{ content_item.title }}" class="card-img-top img-fluid" style="background: rgb(77, 77, 77); object-fit: cover; height: 200px; border-radius: 5px;">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title"><a class="text-decoration-none text-body" href="{{ content_item.slug}}.html ">{{ content_item.title }}</a></h5>
          <p class="card-text mb-3">{{ content_item.preview | safe}}</p>
          
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

{% endblock %}
