{% load media %}
{% comment %}Baner strony glownej, styl nowoczesny
   (Tresc > Strona glowna > Styl). Roznica wobec klasycznego jest jedna, za to
   widoczna: zdjecie idzie przez cala szerokosc okna, bez kontenera. Napisy sa
   te same - zwykly tytul, zdanie pod nim i przycisk.{% endcomment %}
<section class="{{ banner.banner_visibility_class }} group">
  {% if banner.banner_url %}<a href="{{ banner.banner_url }}" class="block">{% endif %}
    <div class="relative overflow-hidden bg-slate-900" style="min-height: {{ banner.banner_min_height }}px; border-radius: {{ banner.banner_radius }}px;">
      {% picture banner.banner_image alt=banner.banner_title css="absolute inset-0 h-full w-full object-cover" sizes="100vw" loading="eager" fetchpriority="high" %}
      {% if banner.banner_title or banner.banner_text or banner.banner_button_label %}
        <div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/30 to-transparent"></div>
        <div class="relative mx-auto flex w-full max-w-6xl flex-col justify-end px-6 py-12 sm:py-16"
             style="min-height: {{ banner.banner_min_height }}px;">
          <div class="max-w-3xl text-white">
            {% if banner.banner_title %}
              <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{{ banner.banner_title }}</h1>
            {% endif %}
            {% if banner.banner_text %}
              <p class="mt-5 max-w-2xl text-lg leading-relaxed text-white/85">{{ banner.banner_text }}</p>
            {% endif %}
            {% if banner.banner_button_label and banner.banner_url %}
              <span class="btn-primary mt-8 px-5 py-2.5">
                {{ banner.banner_button_label }}
                <span aria-hidden="true">&rarr;</span>
              </span>
            {% endif %}
          </div>
        </div>
      {% endif %}
    </div>
  {% if banner.banner_url %}</a>{% endif %}
</section>