{# familyList.twig #}

{% extends "skeleton/base.twig" %}
{% block style %}
	{{ parent() }}
	.card{
		margin-bottom: 2rem;
		padding: 1rem;
	}
	.card img{
		max-height: 180px;
	}
	.col-md-4 {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1rem;
		}
{% endblock %}
{% block content %}
<div class="container my-5">
	<div class="bg-secondary text-white mb-4 p-2">
		<h1>{{ page_title }}</h1>
	</div>
	{# Father family #}
	{% for list in familyList %}
	{% set card = attribute(_context, list) %}
		{# This line gets the key of the dictionary entry #}
		{# {% include 'partial/card_horizontal.twig' %} #}
		<div class="card h-100">
			<div class="row g-0">
				<!-- Image block -->
				<div class="col-md-4">
					<div class="view overlay">
						<img class="img-fluid" src="{{ card.img_src }}?v={{ version }}" alt="{{ card.title }}">
					</div>
				</div>
				<!-- Text block -->
				<div class="col-md-8">
					<div class="card-body">
						<div class="hover-overlay">
							<a href="{{ card.link }}">
								<div class="mask"></div>
							</a>
						</div>
						<h3 class="card-title">{{ card.title }}</h3>
						<p class="card-text">{{ card.description }}</p>
					</div>
				</div>
			</div>
		</div>
	{% endfor %}
</div>
{% endblock %}