{% extends "base.html" %}
{% block title %}Contacto{% endblock %}

{% block content %}


<style>
  .card-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    margin: 6px 0;
}

.card-row .label {
    font-weight: bold;
}
</style>


<div class="page-header">
  <div class="page-eyebrow">Comunicación</div>
  <div class="page-title"><i class="bi bi-person-vcard"></i> Contacto</div>
</div>

<div class="card-grid">
  <div class="card" style="width:300px;">
    <div class="card-icon">✉️</div>
    <div class="card-title">Correo electrónico</div>
    <div class="card-row card-desc"><span class="label">Oficina</span><span>malaga.automocion@policia.es</span></div>
    <div class="card-row card-desc"><span class="label">Taller</span><span>malaga.tallerauto@policia.es</span></div>
    <div class="card-row card-desc"><span class="label">Jefatura</span><span>malaga.jefeautomocion.es</span></div>
  </div>

  <div class="card" style="width:300px; margin-left:50px;">
    <div class="card-icon">📞</div>
    <div class="card-title">Teléfono</div>
    <div class="card-row card-desc"><span class="label">Oficina</span><span>952 046 317</span></div>
    <div class="card-row card-desc"><span class="label">Taller</span><span>952 046 221</span></div>
    <div class="card-row card-desc"><span class="label">Jefatura</span><span>952 046 453</span></div>
  </div>
</div>

{% endblock %}