<?php
$wrapper_width = get_sub_field('wrapper_width');
$title = get_sub_field('title');

$content_1 = get_sub_field('content_1');
$content_2 = get_sub_field('content_2');
$content_3 = get_sub_field('content_3');
$content_4 = get_sub_field('content_4');
$content_5 = get_sub_field('content_5');
$title_1 = get_sub_field('title_1');
$title_2 = get_sub_field('title_2');
$title_3 = get_sub_field('title_3');
$title_4 = get_sub_field('title_4');
$title_5 = get_sub_field('title_5');
?>

<div class="layout-steps five" id="flex-section-<?php echo get_row_index();?>">
  <?php if($wrapper_width != 'full') echo "<div class='container {$wrapper_width}'>"; ?>
    <?php if($title) echo "<h3 class='layout-title'><span>{$title}</span></h3>"; ?>
    <div class="row row-padding wrapper-step-5">
      <div class="col-1-1 col-md-1-5 col-sm-1-3 block-content" data-mh>
        <h5 class="step-title" data-mh="title" ><span>1</span><?= $title_1 ?></h5>
        <p><?= $content_1 ?></p>
      </div><!--col-->
      <div class="col-1-1 col-md-1-5 col-sm-1-3 block-content" data-mh>
        <h5 class="step-title" data-mh="title" ><span>2</span><?= $title_2 ?></h5>
        <p><?= $content_2 ?></p>
      </div><!--col-->
      <div class="col-1-1 col-md-1-5 col-sm-1-3 block-content" data-mh>
        <h5 class="step-title" data-mh="title" ><span>3</span><?= $title_3 ?></h5>
        <p><?= $content_3 ?></p>
      </div><!--col-->
      <div class="col-1-1 col-md-1-5 col-sm-1-3 block-content" data-mh>
        <h5 class="step-title" data-mh="title" ><span>4</span><?= $title_4 ?></h5>
        <p><?= $content_4 ?></p>
      </div><!--col-->
      <div class="col-1-1 col-md-1-5 col-sm-1-3 block-content" data-mh>
        <h5 class="step-title" data-mh="title" ><span>5</span><?= $title_5 ?></h5>
        <p><?= $content_5 ?></p>
      </div><!--col-->
    </div><!--row-->
  <?php if($wrapper_width != 'full') echo "</div>"; ?>
</div>
