_layouts/landing.html

---
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 }}