avtopost.kultmost.ru/templates/exhibition/index.html
2026-09-03 17:25:18 -04:00

345 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}
{% import "components/share.html" as share %}
{% block title %}{{exhibition.title}} | Картины{% endblock %}
{% block content %}
{{ header.section(user) }}
<section class="c_72077">
<div class="c_q7xgt b_vnic7">
<div class="c_w3iz6">
<div class="c_k9ibf b_6fwyq" style="grid-area: b;padding: 0;">
<div class="b_ornr9">
<picture>
<img crossorigin="anonymous" fetchpriority="high" loading="eager" alt="{{ exhibition.title }}" class="b_ornr9"
src="/b/exhibition/{{ exhibition.poster_file_id }}" alt="Выставка {{exhibition.title }}">
</picture>
</div>
</div>
<div class="c_k9ibf b_6fwyq grid_a">
<div class="c_pnig2 b_pliaa">
<a class="b_34dg0" href="/exhibitions">
<svg class="b_7ufh2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.86875 9.75L10.0688 13.95L9 15L3 9L9 3L10.0688 4.05L5.86875 8.25H15V9.75H5.86875Z" fill="#5F1798" />
</svg>
<span class="b_ww2ac">Назад</span>
</a>
<div class="{% if now > exhibition.date_finish %}b_vabj9_2{%else%}b_vabj9{% endif %}">
{% if now > exhibition.date_finish %}
<span class="c_95csi b_0jst1_2">Закончилась</span>
{% elif now > exhibition.datetime_start %}
<span class="c_95csi b_0jst1">Началась</span>
{% else %}
<span class="c_95csi b_0jst1">Формируется</span>
{% endif %}
</div>
{% if now < exhibition.date_finish %}
<span class="b_sdf">До {{ (exhibition.date_finish.strftime('%d.%m.%Y')) if exhibition.date_finish else ''}}</span>
{% endif %}
</div>
<header class="c_77wsp b_qx462">
<h2 class="c_aiv78 b_6jj0l">{{exhibition.title}}</h2>
{% if exhibition.get('tizer_file_id') or exhibition.get('tizer_link') %}
<a class="c_wcdb7 b_ofiw3" href="{% if exhibition.get('tizer_link') %}{{exhibition.tizer_link}}{% else %}/b/exhibition/{{ exhibition.tizer_file_id }}{% endif %}" rel="noopener noreferrer" style="width: 100%;margin: 10px 0;">
<span class="b_j2ln2">Релиз выставки</span>
</a>
{%endif%}
<p>Место проведения: {{ exhibition.get('place') }}</p>
{% if posts|length > 0 %}
<p>Картины: {{posts|length}}</p>
{% endif %}
{{ share.share('/exhibition/{}'.format(exhibition._id), exhibition.title, '/b/exhibition/{}'.format(exhibition.poster_file_id), "Приглашаем на выставку") }}
</header>
</div>
<div style="grid-area: c;display: grid;gap: 10px;">
<a class="c_wcdb7 b_ofiw3" href="/exhibitions" rel="noopener noreferrer">
<span class="b_j2ln2">Все выставки</span>
</a>
<!-- TODO -->
</div>
{% if exhibition.get('status',-1) < 2 and members|length > 10 %}
<div class="inptS">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z"
fill="#1F1F1F"></path>
</svg>
<input id="memberSearch" list="membersList" type="search" placeholder="Поиск участников..."
aria-label="Поиск участников" />
<datalist id="membersList">
{% for member in members %}
<option value="{{ member.username or '' }}"></option>
{% endfor %}
</datalist>
</div>
{% endif %}
</div>
<div class="c_cnedr">
{% for doc in posts %}
{% set post=doc.get('post')%}
<figure class="c_g5532 b_wcxt0">
<div class="b_1tx4m">
<picture data-link="https://kultmost.ru/artists/{{post.user._id}}" data-label="Все картины автора и стоимость">
<img crossorigin="anonymous" fetchpriority="high" loading="eager" alt="{{ post.title }}" class="b_1tx4m"
src="/b/posts/{{ post.medias[0] }}" data-src="/b/posts/{{ post.medias_original[0] }}">
</picture>
</div>
<figcaption class="c_fzh03 b_bp0ws">
<header class="c_zjvne b_tt84a">
<h2 class="c_6kn8d b_uilob">{{post.title}}</h2>
</header>
{% if user and (user._id == post.user._id or 'partner' in user.get('roles',[]))%}
<label class="offer-label delivery-checkbox-label">
<input type="checkbox"
onchange="saledPaintings('{{post._id}}')"
class="offer-checkbox delivery-checkbox send-checkbox"
{% if post.status == 'Продано' %}checked{%endif%}>
<span>Продано</span>
</label>
{% endif %}
<div class="b_xz6em" ><img class="b_ob59y" src="/a/{{post.user._id}}" crossorigin="anonymous" fetchpriority="high" loading="eager">
<div class="c_9hjdk b_ffruz">
<p class="b_qla2q">{{post.city or ''}}</p>
<p class="b_09est">{{post.author}}</p>
<p class="b_qla2q">{{post.grade or ''}}</p>
</div>
</div>
<!-- <p class="c_25654 b_tqr4q">{{post.description}}</p> -->
<p class="c_tn4fi b_vjrwu">{{ (post._id.generation_time.strftime('%d.%m.%Y')) if post._id else ''}}</p>
</figcaption>
</figure>
{% endfor %}
</div>
<script>
function saledPaintings(postId) {
fetch(`/api/post/${postId}/sale`, {
method: 'PUT'
})
.then(response => {
if (response.ok) {
// Find and delete the parent figure
const postElement = document.querySelector(`figure[data-postId='${postId}']`);
showToast({
message: 'Сохранено!',
status: 'info',
duration: 1200
});
} else {
showToast({
message: 'Ошибка соединения с сервером!',
status: 'error',
duration: 2500
});
}
})
.catch(error => {
// Handle network errors
showToast({
message: 'Ошибка соединения с сервером!',
status: 'error',
duration: 2500
});
});
}
</script>
<script>
(function(){
const input = document.getElementById('memberSearch');
const container = document.querySelector('.c_cnedr');
if (!input || !container) return;
const itemsSelector = '.c_cnedr > a';
const nameSelector = '.b_d1iwe';
const norm = s => (s || '').toString().trim().toLowerCase();
function filter() {
const q = norm(input.value);
const items = container.querySelectorAll(itemsSelector);
items.forEach(a => {
const nameEl = a.querySelector(nameSelector);
const name = norm(nameEl ? nameEl.textContent : '');
a.style.display = (q === '' || name.indexOf(q) !== -1) ? '' : 'none';
});
}
input.addEventListener('input', filter);
input.addEventListener('change', filter);
input.addEventListener('keydown', (e) => { if (e.key === 'Escape') { input.value = ''; filter(); } });
filter();
})();
</script>
</div>
</section>
{{ footer.section() }}
{% endblock %}
{% block head %}
<meta property="og:title" content="{{exhibition.title}}">
<meta property="og:description" content="{{exhibition.short_desc}}">
<!-- <meta property="og:type" content="product"> -->
<meta property="og:image" content="https://avtopost.kultmost.ru/b/exhibition/{{exhibition.poster_file_id}}">
<meta property="og:url" content="https://avtopost.kultmost.ru/exhibition/{{exhibition._id}}">
<meta name="description" content="{{exhibition.short_desc}}">
<meta property="og:site_name" content="Конкурсы | KULTMOST.АВТОПОСТ">
{{ header.style() }}
<style>
.menua{width: 100%;
display: flex;
flex-direction: column;
gap: 7px;
margin: 10px 20px;}
.icona{display: flex;
gap: 10px;
align-items: center;}
.icona>span{color: #5F1798;}
.b_0jst1 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_vabj9 { align-items: center; background: rgba(14, 214, 70, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_0jst1_2 { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_vabj9_2 { align-items: center; background: #5e17982f; border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_ornr9{ border-radius: 10px; cursor: zoom-in; }
.b_thlt1 { align-items: center; background: rgba(14, 214, 70, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_5dr47 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_thlt1_2 { align-items: center; background: rgba(95, 23, 152, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_5dr47_2 { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_xz6em { align-items: center; align-self: stretch; display: flex; gap: 13px; }
.b_sdf{font-size: 11px;font-weight: bold;}
picture{overflow: hidden;}
picture>img{width: 100%;object-fit: contain;}
.b_ob59y { border-radius: 1em; height: 70px; min-width: 70px; max-width: 170px; vertical-align: top; object-fit: cover;}
.b_ffruz { align-items: flex-start; display: flex; flex-direction: column; flex: 1 0 0; justify-content: center; }
.b_qla2q { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_09est { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 700; line-height: normal; }
.b_ofiw3 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 15px 0; width: 100%; margin: 10px 0; }
.b_j2ln2 { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_itgkw { fill: #5F1798; height: 12px; width: 12px; }
.b_tsh13 { height: 18px; width: 18px; }
.b_52e6m { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_i5j4n { align-items: center; background: rgba(95, 23, 152, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 0 10px; }
.b_ucqaf { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_nj4pd { align-items: center; background: rgba(14, 214, 70, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_ucqaf_2 { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_nj4pd_2 { align-items: center; background: rgba(95, 23, 152, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_ucqaf_3 { color: #cc1818; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_nj4pd_3 { align-items: center; background: rgba(152, 23, 41, 0.2); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_xdnpi { align-items: flex-start; display: flex; gap: 10px; }
.b_p0rks { color: #000; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.b_0j79e { align-items: center; align-self: stretch; display: flex; }
.b_erngz { align-items: flex-start; background: #FFF; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; gap: 10px; height: 90px; justify-content: center; padding: 10px 20px; width: 335px; }
.b_cm8eh { aspect-ratio: 1/1; border-radius: 1em; height: 70px; width: 70px; object-fit: cover;}
.b_2oew9 { color: #3A3A3A; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; width: 189px; }
.b_zjx0y { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_2tocm { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_wobxu { align-items: flex-start; display: flex; flex-direction: column; flex: 1 0 0; justify-content: center; }
.b_ilrcq { align-items: center; align-self: stretch; display: flex; gap: 13px; }
.b_lyhks { align-items: flex-start; background: #FFF; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; width: 335px; }
.b_1tx4m { align-self: stretch; border-radius: 5px; }
.b_uilob { color: #000; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; width: 315px; }
.b_tt84a { align-items: center; align-self: stretch; display: flex; justify-content: center; }
.b_tqr4q { -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; color: rgba(58, 58, 58, 0.75); display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_vjrwu { align-self: stretch; color: rgba(58, 58, 58, 0.75); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; text-align: right; }
.b_bp0ws { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; }
.b_wcxt0 { align-items: flex-start; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; width: 335px; }
.b_kcdt4 { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_fa8f0 { -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; color: rgba(58, 58, 58, 0.75); display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; min-height: 51px; overflow: hidden; text-overflow: ellipsis; }
.b_n8hqw { align-items: flex-start; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; width: 335px; }
.b_g103h { align-items: center; display: flex; flex-direction: column; flex: 1 0 0; gap: 30px; }
/* Mobile */
@media (max-width: 699px) {
.c_wcdb7 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; min-width: 300px; padding: 15px 0; width: 335px; }
.c_6vze6 { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; min-width: 300px; }
.c_g5532 { align-items: flex-start; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; min-width: 300px; width: 335px; }
.c_fyi26 { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.c_r75b6 { align-items: flex-start; background: #FFF; display: flex; justify-content: center; width: 375px; }
}
/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_6vze6 { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; padding-left: 50px; }
.c_fyi26 { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; padding-left: 50px; }
.c_hku7i { align-items: flex-start; display: flex; flex-direction: column; flex: 1 0 0; gap: 30px; }
.c_r75b6 { align-items: flex-start; background: #FFF; display: flex; justify-content: center; width: 800px; }
.c_6kn8d { -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; }
}
/* Desktop */
@media (min-width: 901px) {
.c_ll3bc { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.c_6vze6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; padding-left: 100px; }
.c_6kn8d { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.c_zjvne { align-items: center; align-self: stretch; display: flex; }
.c_25654 { -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; color: rgba(58, 58, 58, 0.75); display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; min-height: 51px; overflow: hidden; text-overflow: ellipsis; }
.c_fyi26 { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; padding-left: 100px; }
.c_r75b6 { align-items: flex-start; background: #FFF; display: flex; justify-content: center; width: 1600px; }
}</style>
<style>/* Base (common) styles */
.inptS{height: 48px;display: flex;align-items: center;gap: 10px; border-bottom: 1px solid #5F1798;}
.b_x41jk { fill: #5F1798; height: 12px; width: 12px; }
.b_rroqu { height: 18px; width: 18px; }
.b_ww2ac { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_34dg0 { align-items: center; background: rgba(95, 23, 152, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 0 10px; }
.b_5dr47 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_thlt1 { align-items: center; background: rgba(14, 214, 70, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_5dr47_2 { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_thlt1_2 { align-items: center; background: rgba(95, 23, 152, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_pliaa { align-items: center; display: flex; gap: 10px; }
.b_6jj0l { color: #000; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.b_qx462 { align-items: center; align-self: stretch; display: flex; }
.b_6fwyq { align-items: flex-start; background: #FFF; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; width: 335px; }
.b_j2ln2 { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_ofiw3 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 15px 0; width: 335px; }
.b_axk6u { aspect-ratio: 1/1; border-radius: 1em; height: 70px; width: 70px; object-fit: cover; }
.b_3dduk { color: #3A3A3A; font-family: Inter; font-size: 14px; font-style: italic; font-weight: 400; line-height: normal; }
.b_d1iwe { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_10yj8 { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_2nlvt { align-items: flex-start; display: flex; flex-direction: column; flex: 1 0 0; justify-content: center; }
.b_rmkjd { align-items: center; align-self: stretch; display: flex; gap: 13px; }
.b_vskv8 { color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_d6es7 { fill: #5F1798; flex-shrink: 0; height: 15px; width: 22px; }
.b_7z9xr { align-items: center; display: flex; height: 24px; justify-content: center; padding: 4px 1px 5px 1px; width: 24px; }
.b_94nsn { align-items: center; align-self: stretch; display: flex; gap: 10px; }
.b_bdo54 { align-items: flex-start; background: #FFF; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; width: 335px; }
.b_8ynfe { fill: #5F1798; height: 15px; width: 22px; }
.b_a36z1 { height: 24px; width: 24px; }
.b_vnic7 { align-items: center; align-self: stretch; display: flex; flex-direction: column; gap: 30px; padding: 50px 0 100px; }
.c_77wsp { align-items: baseline;display: flex;flex-direction: column; }
/* Mobile */
@media (max-width: 699px) {
.c_wcdb7 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; min-width: 300px; padding: 15px 0; width: 335px; }
.c_w3iz6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.c_cnedr { align-content: flex-start; align-items: flex-start; align-self: stretch; background: #FFF; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.c_72077 { align-items: center; background: #FFF; display: flex; flex-direction: column; }
}
/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_k9ibf { align-items: flex-start; background: #FFF; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; width: 340px; }
.grid_a{grid-area: a;height: 100%;}
.c_w3iz6 { align-items: flex-start;align-self: baseline;gap: 20px;display: grid;grid-template: "b b a" auto "b b c" auto "b b c" auto; padding-left: 50px; }
.c_cvs7y { align-items: flex-start; background: #FFF; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; width: 340px; }
.c_cnedr { align-content: flex-start; align-items: flex-start; align-self: stretch; background: #FFF; display: flex; flex-wrap: wrap; gap: 20px; padding-left: 50px; }
.c_72077 { align-items: center; background: #FFF; display: flex; flex-direction: column; }
}
/* Desktop */
@media (min-width: 901px) {
.c_aiv78 { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.grid_a{grid-area: a;height: 100%;}
.c_w3iz6 { align-items: flex-start;align-self: baseline;gap: 20px;padding-left: 100px;display: grid;grid-template: "b b a" auto "b b c" auto "b b c" auto;}
.c_cnedr { align-content: center; align-items: center; align-self: stretch; background: #FFF; display: flex; flex-wrap: wrap; gap: 20px; padding-left: 100px; }
.c_72077 { align-items: center; background: #FFF; display: flex; flex-direction: column; }
}</style>
{{ footer.style() }}
{% endblock %}