{{#
/**
 * @name top-level/basic-sections
 * @deprecated This partial has been deprecated. Please use {@link block/basic-alternating} instead.
 * @todo Document property vars/partial
 */
#}}
<section class="px-5 {{ classes }}">
  <div class="mw-grid mx-auto s--grid s--g-cols">
  {{ basic_sections }}
  <div class="mb-11 s--g-col-10 s--g-start-1 m--g-col-12 m--g-start-auto m--grid m--g-cols m--gap-m m--ai-center l--mb-12">
    <div class="{{ if center-images=='true' }}ta-center{{ elseif reverse_layout }}ta-center m--ta-right{{ else }}ta-center m--ta-left{{ /if }} m--g-col-6 {{ if reverse_layout }}m--order-2{{ /if }}">
      {{ if basic_section_image_mobile }}
        <picture>
          <source media="(max-width: 45rem)" srcset="{{ basic_section_image_mobile }}">
          {{ asset:basic_section_image }}
          <img src="{{ url }}" alt="{{ alt }}">
          {{ /asset:basic_section_image }}
        </picture>
      {{ else }}
        {{ asset:basic_section_image }}
        <img src="{{ url }}" alt="{{ alt }}">
        {{ /asset:basic_section_image }}
      {{ /if }}
    </div>
    <div class="m--g-col-6">
      <h2 class="title-2 slate-120 mb-4 l--title-3">{{ basic_section_title }}</h2>
      <p class="body-3 slate">{{ basic_section_description }}</p>
    </div>
  </div>
  {{ /basic_sections }}
  </div>
</section>