{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}


{% block title %}Партнеры{% endblock %}


{% block content %}
{{ header.section(user) }}
<section class="c_du9p7">
    <h2 class="c_2e7ix">Арт-Дилеры</h2>
    <div class="c_j7mw1">
        {% for doc in partner %}
        <div class="b_le4s">
            <div class="b_aspvt">
                <img class="c_o0nwu" src="/a/{{doc._id}}" crossorigin="anonymous" fetchpriority="high" loading="eager">
            </div>
            <span class="b_6e4lx">{{ doc.username }}</span>
            {% if doc.description %}
            <div class="tooltip-trigger" data-tooltip="{{doc.description}}" style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;"></div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{{ footer.section() }}
{% endblock %}

{% block head %}
{{ header.style() }}
<style>/* Base (common) styles */
.c_o0nwu{
    border-radius: 1em;
  height: 100px;
  min-width: 100px;
  object-fit: cover;
  max-width: 270px;
  object-position: top;
}
.b_6e4lx { width: 100%; text-align: center; color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_aspvt { align-items: center; display: flex; gap: 10px; }
.b_le4s { align-items: center;
  align-self: stretch;
  display: flex;
  gap: 10px;
  width: 100%;
  flex-direction: column;
  box-shadow: 0 0px 8px 0px #00000036;
  padding: 10px;
  margin: 10px;
  border-radius: 5px; }
.b_f7c7g { align-self: stretch; background: #D9D9D9; object-fit: contain;}
.b_jh0gq { align-items: flex-start; display: flex; flex-direction: column; width: 335px; }
.c_2e7ix{ margin-bottom: 20px; text-transform: uppercase;}
/* Mobile */
@media (max-width: 699px) {
.c_j7mw1 { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; }
.c_du9p7 { margin: auto;align-items: center; background: #FFF; display: flex; flex-direction: column; width: 375px; }
.c_y32j2 { align-items: flex-start; display: flex; flex-direction: column; width: 100%; }

}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_tccnr { background: #D9D9D9;  width: 340px; }
.c_j7mw1 { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 25px; }
.c_du9p7 { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; padding-left: 50px; width: 800px; }
}

/* Desktop */
@media (min-width: 901px) {
.c_y32j2 { align-items: flex-start; display: flex; flex-direction: column; width: 450px; }
.c_j7mw1 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 25px; }
.c_du9p7 { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; padding-left: 100px; width: 1600px; }
}</style>
{{ footer.style() }}
{% endblock %}