{% extends 'base.html' %} {% load static %} {% block content %}
{% block title %}skinregeneration.org | histology{% endblock %}
<link rel="stylesheet" href="{% static '/css/histology.css' %}">

<div class="main">
    <div class="hist-paper-title">
        <h1> Histology Gallery </h1>
    </div>
    <div class="hist-grid">
      {% for histology in histologyGallery %}
      {% with random_class=css_classes|random %}
        <a href="{% url 'histology:histology_detail' histology.id %}" class="hist-card {{ random_class }}">
          <img alt="{{ histology.name }} Histology" src="{{ histology.histologyImage.url }}">
          <div class="overlay-1"> 
            <h1>{{ histology.name }}</h1>
            <p>{{histology.subtitle}}</p>
          </div>
        </a>
      {% endwith %}
    {% endfor %}
    
  </div>

</div>

{% endblock %}