{% if page %}
{% set title = page|os_trans("title") %}
{% set description = page|os_trans("description") %}
{% endif %}
{% set menu = menu ? menu : 'about' %}
{% if page.banner %}
{% set thumbnail = page.banner.thumbnail %}
{% set banner = asset(page.banner.file) %}
{% endif %}

{% extends 'Default/base.html.twig' %}
{% block content %}
<div class='relative gpadding {{desktop("vt-80-in")}} {{mobile("vt-30-in")}} '>
	{% if page and page|os_trans("content") %}
	{% set content = page|os_trans("content")|summary %}
    <div class='{{desktop("flex row top")}} {{mobile("")}}'>
        {% set hasSidebar = page.picture or page.pictureTitle or page.pictureSubtitle or content.summary|length > 20 %}
		{% if page.picture or page.pictureTitle or page.pictureSubtitle %}
		<figure class='{{desktop("third right-80 ")}} {{mobile("w100 bottom-20")}}'>
			{% if page.picture %}
			<img src='{{asset(page.picture.thumbnail)}}' class='block w100 {{desktop("radius-20")}} {{mobile("radius-10")}}' alt="{{page.pictureTitle ? page.pictureTitle : title}}">
			{% endif %}
			<h2 class='h3 success top-20 upper font-alt'>{{page.pictureTitle ? page.pictureTitle}}</h2>
			<h3 class='h6 semibold'>{{page.pictureSubtitle ? page.pictureSubtitle}}</h3>
		</figure>
        {% elseif content.summary|length > 20 %}
		<div class='border-right border-1x border-solid border-gray-alt hoverflow {{desktop("third-40 right-80")}} {{mobile("w100 bottom-20")}}'>
			<ul class='list h5'>
				{{ content.summary|raw }}
			</ul>
		</div>
		{% endif %}
		<div class='w100 {{desktop(hasSidebar ? "" : "gpadding")}} {{mobile("")}} '>
			<div class='article h6 text-justify light'>
			{{ content.content|raw }}
			</div>
		</div>
    </div>
	{% endif %}
</div>
{% endblock %}