layout: page header: false full_width: true article_header:

type: overlay
align: center
height: 80vh

<div class=“layout–landing”>

<div class="heros">
{%- for _section in page.data.sections -%}
  {%- include snippets/get-nav-url.html path=_section.background_image.src -%}
  {%- assign _url = __return -%}
  {%- if _section.theme == 'light' -%}
    <section class="hero hero--center hero--light" id="hero-{{ forloop.index }}"
  {%- elsif _section.theme == 'dark' -%}
    <section class="hero hero--center hero--dark" id="hero-{{ forloop.index }}"
  {%- else -%}
    <section class="hero hero--center" id="hero-{{ forloop.index }}"
  {%- endif -%}
  {%- if _section.background_color -%}
      style="background-image: url({{ _url }}); background-color: {{ _section.background_color }};">
  {%- else -%}
      style="background-image: url({{ _url }});">
  {%- endif -%}

      <div class="hero__content">
        <div class="mb-5">

          <h3>{{ _section.title }}</h3>
            {%- if _section.excerpt-%}
          <p>{{ _section.excerpt }}</p>
          {%- endif -%}

          {%- if _section.actions -%}
            <ul class="menu">
            {%- for _action in _section.actions -%}
              {%- include snippets/get-nav-url.html path=_action.url -%}
              {%- assign _url = __return -%}
              {%- assign _type = _action.type | default: 'outline-info' -%}
              <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
            {%- endfor -%}
            </ul>
          {%- endif -%}

        </div>

        {%- if _section.children -%}
          {%- assign _size = _section.children | size  -%}
          <div class="grid--container">
            <div class="grid grid--p-3">

              {%- for child in _section.children -%}

                {%- if _size >= 2 -%}
                  {%- assign _cell_md_col = 6 -%}
                {%- else -%}
                  {%- assign _cell_md_col = 12 | divided_by: _size -%}
                {%- endif -%}

                {%- if _size >= 4 -%}
                  {%- assign _cell_lg_col = 3 -%}
                {%- else -%}
                  {%- assign _cell_lg_col = 12 | divided_by: _size -%}
                {%- endif -%}

                <div class="cell cell--12 cell--md-{{ _cell_md_col }} cell--lg-{{ _cell_lg_col }} ">

                  <div class="mb-5">
                    <h4>{{ child.title }}</h4>

                    {%- if child.excerpt-%}
                      <p>{{ child.excerpt }}</p>
                    {%- endif -%}

                    {%- if child.actions -%}
                      <ul class="menu">
                        {%- for _action in child.actions -%}
                          {%- include snippets/get-nav-url.html path=_action.url -%}
                          {%- assign _url = __return -%}
                          {%- assign _type = _action.type | default: 'outline-info' -%}
                          <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
                        {%- endfor -%}
                      </ul>
                    {%- endif -%}
                  </div>

                  {%- if child.image and child.image.src -%}

                    {%- if child.image.url -%}
                      {%- include snippets/get-nav-url.html path=child.image.url -%}
                      {%- assign _item_image_url = __return -%}
                    {%- else -%}
                      {%- assign _item_image_url = nil -%}
                    {%- endif -%}

                    {%- include snippets/get-nav-url.html path=child.image.src -%}
                    {%- assign _item_image_src = __return -%}

                    {%- if child.image.is_row -%}
                      <div class="mb-5">
                    {%- endif -%}
                        <div class="mx-auto" style="{{ child.image.style }}">
                    {%- if _item_image_url -%}
                          <a href="{{ _item_image_url }}">
                    {%- endif -%}
                            <img src="{{ _item_image_src }}"/>
                    {%- if _item_image_url -%}
                          </a>
                    {%- endif -%}
                        </div>
                    {%- if child.image.is_row -%}
                      </div>
                    {%- endif -%}
                  {%- endif -%}

                  {%- if child.content-%}
                    <p>{{ child.content }}</p>
                  {%- endif -%}

                </div>
              {%- endfor-%}

            </div>
          </div>
        {%- endif -%}

    {%- if _section.image.full_width == true -%}
      </div> {% comment %} end hero__content {% endcomment %}
    {%- endif -%}

        {%- if _section.image and _section.image.src -%}

          {%- if _section.image.url -%}
            {%- include snippets/get-nav-url.html path=_section.image.url -%}
            {%- assign _section_image_url = __return -%}
          {%- else -%}
            {%- assign _section_image_url = nil -%}
          {%- endif -%}

          {%- include snippets/get-nav-url.html path=_section.image.src -%}
          {%- assign _section_image_src = __return -%}

          {%- if _section.image.is_row -%}
            <div class="mb-5">
          {%- endif -%}
              <div class="mx-auto" style="{{ _section.image.style }}">
          {%- if _section_image_url -%}
                <a href="{{ _section_image_url }}">
          {%- endif -%}
                  {%- if _section.image.full_width == true -%}
                    <img class="hero__cover hero__cover--full-width" src="{{ _section_image_src }}"/>
                  {%- else -%}
                    <img class="hero__cover" src="{{ _section_image_src }}"/>
                  {%- endif -%}
          {%- if _section_image_url -%}
                </a>
          {%- endif -%}
              </div>
          {%- if _section.image.is_row -%}
            </div>
          {%- endif -%}
        {%- endif -%}

    {%- if _section.image.full_width != true -%}
      </div> {% comment %} end hero__content {% endcomment %}
    {%- endif -%}

    {%- if _section.content-%}
      <p>{{ _section.content }}</p>
    {%- endif -%}
    </section>
{%- endfor -%}
</div>

</div>

{{ content }}