<div class="flip-card" tabindex="0">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div
        class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
        style="
          background-color: {{ bg_color }};

          {% if image_url %}
            background-image: url('{{ image_url }}')
          {% endif %}
        "
      >
        <div
          class="
            absolute top-0 left-0

            border border-r-[27rem] border-r-[transparent]
            border-l-0 border-t-[33rem]
          "
          style="border-top-color: {{ bg_color }}"
        ></div>

        <h1
          class="
            font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%]
          "
        >{{ title }}</h1>

        <div
          class="
            absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed

            md:hidden
          "
        >
          Pro zobrazení detailů
          <br>
          se dotkni karty.
        </div>
      </div>
    </div>
    <div
      class="flip-card-back rounded-3xl p-10"
      style="background-color: {{ bg_color }}"
    >
      <div class="prose prose-black">
        {% comment %}
          WARNING: This is generated by the styleguide implementation.
          Don't keep the |safe!
        {% endcomment %}

        {{ content|safe }}
      </div>

      {% if button_text %}
        <div class="flex justify-center items-center my-5">
          {% include 'patterns/atoms/buttons/round_button.html' with button_text=button_text %}
        </div>
      {% endif %}
    </div>
  </div>
</div>
