{% import "competition/card.html" as card %}

{% macro section(competitions) -%}
<section class="c_cr9xg">
    <div class="c_s7it2">
        <div class="c_fwe1m">
            <h2 class="b_p0hpm">Конкурсы</h2>
        </div>
    </div>
    <div class="c_dbu4q">
        {% for competition in competitions %}
            {{card.section(competition, False, "/competition/{}".format(competition._id))}}
        {% endfor %}
    </div>
</section>
{%- endmacro %}

{% macro style() -%}
{{card.style()}}
<style>/* Base (common) styles */
.b_p0hpm { color: #5F1798; font-family: Inter; font-size: 42px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; }
/* Mobile */
@media (max-width: 699px) {
.c_dbu4q { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.c_fwe1m { align-items: center; display: flex; flex-direction: column; gap: 20px; width: 335px; }
.c_s7it2 { align-items: flex-start; align-self: stretch; display: flex; gap: 20px; justify-content: center; }
.c_cr9xg { align-items: center; background: #FFF; display: flex; flex-direction: column; gap: 30px; }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_dbu4q { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; }
.c_fwe1m { align-items: flex-start; display: flex; flex-direction: column; gap: 20px; width: 335px; }
.c_s7it2 { align-items: flex-start; align-self: stretch; display: flex; gap: 20px; }
.c_cr9xg { align-items: center; background: #FFF; display: flex; flex-direction: column; gap: 30px; padding-left: 50px; }
}

/* Desktop */
@media (min-width: 901px) {
.c_dbu4q { align-content: flex-start; align-items: flex-start; display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
.c_fwe1m { align-items: flex-start; display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; width: 335px; }
.c_s7it2 { align-items: flex-start; display: flex; gap: 20px; width: 100%; }
.c_cr9xg { align-items: center; background: #FFF; display: flex; flex-direction: column; gap: 30px; padding-left: 100px;}
}</style>
{%- endmacro %}