---
default_image_classes: "l--pr-2-col"
default_image_classes_reversed: "l--pl-2-col"
default_top_bottom_space: "my-11 s--my-12"
default_grid_container_margins: " mb-11 s--mb-12"
---
{{#
/**
 * @name block/basic-alternating
 * @description A partial for basic alternating blocks. Adding custom image classes allows the image to be position and sized any way, but the fallback will assume an image width of 5 columns on desktop layouts.
 * @property {string} title
 * @property {string} description
 * @property {string} image
 * @property {string} [sub_title] - Optional lead in uppercase text above title
 * @property {string} [link_text]
 * @property {string} [link_url]
 * @property {string} [image_mobile]
 * @property {string} [text_on] - Have the text appear on the `left` or `right`
 * @property {bool} [alternating_backgrounds=false]
 * @property {string} [background_color] - If `alternating_backgrounds` is true, you can set the `background_color` var
 * @property {bool} [mobile_image_bottom=false] - Flips the order of the image on mobile size
 * @property {string} [custom_image_classes] - Custom classes to add to image when it's on the right OR right
 * @property {string} [default_image_classes_reversed="l--pl-2-col"] - Custom classes to add to image when it's on the right
 * @property {string} [default_image_classes="l--pr-2-col"] - Custom classes to add to image when it's on the left
 */
#}}
<section class="px-5 {{ if alternating_backgrounds }} py-11 s--py-12 {{ background_color }} {{ else }} {{ custom_top_bottom_space or default_top_bottom_space }} {{ /if }}">
  <div class="mw-32 m-0 {{ unless alternating_backgrounds }}{{ custom_grid_container_margins or default_grid_container_margins }} {{ /unless }} m--mw-grid mx-auto grid g-cols gap-m m--ai-center">
    {{ if text_on=="left" }}
      <div class="relative g-col-12 m--g-col-6 m--h-100 m--order-2 ta-center m--ta-right {{ if mobile_image_bottom }}order-2{{ /if }}">
        <picture class="block w-100 h-auto">
          <source srcset="{{ image_mobile or image }}" media="(max-width: 480px)">
          {{ asset:image }}
          <img src="{{ url }}"
            alt="{{ alt }}"
            class="mw-100 relative border-box {{ custom_image_classes or default_image_classes_reversed }}">
          {{ /asset:image }}
        </picture>
      </div>
    {{ else }}
      <div class="relative g-col-12 m--g-col-6 m--h-100 ta-center m--ta-left {{ if mobile_image_bottom }}order-2 m--order-0{{ /if }}">
        <picture class="block w-100 h-auto">
          <source srcset="{{ image_mobile or image }}" media="(max-width: 480px)">
          {{ asset:image }}
          <img src="{{ url }}"
            alt="{{ alt }}"
            class="mw-100 relative border-box {{ custom_image_classes or default_image_classes }}">
          {{ /asset:image }}
        </picture>
      </div>
    {{ /if }}

    <div class="g-col-12 m--g-col-6">
      {{ if sub_title }}
        <p class="lead-in-1 {{ foreground_color or 'slate' }} mb-2">{{ sub_title }}</p>
      {{ /if }}
      <h2 class="title-3 {{ foreground_color or 'slate-120' }} mb-4 m--title-3 m--mt-0">{{ title }}</h2>
      <p class="body-3 {{ foreground_color or 'slate' }} m--mb-0">{{ description }}</p>
      {{ if link_text }}
        <a href="{{ link_url }}" class="ocean fw-500 fs-4 lh-4 mt-4 link hover-link-border hover-link-border-arrow inline-block">
          {{ link_text }} <i class="rarr"></i>
        </a>
      {{ /if }}
    </div>

  </div>
</section>