Fancy 50-50 Module

<?php
/**
 * Template part for displaying the 50/50 Module
 *
 * @link https://www.advancedcustomfields.com/resources/flexible-content/
 *
 * @package Prana
 */

// settings
$index = $template_args['index'];
$fifty_fifty_size = get_sub_field('5050_size');
$fifty_fifty_size = str_replace(' ','-', $fifty_fifty_size);
$fifty_fifty_size = strtoLower($fifty_fifty_size);
$image_side = get_sub_field('usm_module_setting_image_side');
$bg_color = get_sub_field('usm_module_setting_background_color');

// image
$image = get_sub_field('usm_module_part_image');
$horizontal = get_sub_field('usm_module_setting_horizontal_focus_point');
$vertical = get_sub_field('usm_module_setting_vertical_focus_point');
$image_position = usm_format_image_position($horizontal, $vertical);
$video_url = get_sub_field('5050_video_embed');

// content
$pretitle = get_sub_field('usm_module_part_pretitle');
$title = get_sub_field('usm_module_part_title');
$content = get_sub_field('usm_module_part_content');
$button = get_sub_field('usm_module_part_button');

?>

<div id="<?php echo 'module-' . $index; ?>" class="module module-50-50 <?php echo $fifty_fifty_size; ?> module-setting-image-side-<?php echo $image_side; ?> module-setting-bg-<?php echo $bg_color; ?> <?php echo 'module-' . $index; ?>">

	<?php if ($fifty_fifty_size == 'content-width'): ?>
		<div class="container">
	<?php endif; ?>

	<?php if ( $content ) : ?>
		<div class="module-part-content">
			<div class="module-part-content-wrap">

				<?php if ($title) : ?>
					<div class="module-part-heading">
						<h2 class="module-part-title">
							<?php if ($pretitle) : ?>
								<small><?php echo $pretitle; ?></small>
							<?php endif; ?>
							<span data-widowfix><?php echo $title; ?></span>
						</h2>
					</div>
				<?php endif; ?>

				<div class="flush">
					<?php echo $content; ?>

					<?php if ( $button ) : ?>
						<a href="<?php echo $button['url']; ?>" target="<?php echo $button['target']; ?>" class="btn-primary"><?php echo $button['title']; ?></a>
					<?php endif; ?>
				</div>
			</div>
		</div>
	<?php endif ?>

	<?php if ( $image ) : ?>
		<div class="module-part-image">

			<?php // If video URL has a value add the button to play video
			if ( $video_url ): ?>
				<button class="btn-reset" type="button" data-a11y-dialog-show="modal-5050"><span class="sr-only">Play video</span><svg xmlns="http://www.w3.org/2000/svg" width="94" height="94"><path fill="#FAF9F7" d="M47 0C21.084 0 0 21.084 0 47s21.084 47 47 47 47-21.084 47-47S72.916 0 47 0zm24.326 48.816L37.41 72.723a1.51 1.51 0 0 1-.868.277c-.247 0-.495-.06-.72-.185A1.6 1.6 0 0 1 35 71.406V23.594a1.6 1.6 0 0 1 .822-1.41 1.5 1.5 0 0 1 1.59.093l33.916 23.906c.42.297.672.79.672 1.317 0 .527-.253 1.02-.674 1.316z"/></svg></button>
			<?php endif; ?>

			<?php echo prana_acf_responsive_image($image, 'full', ['992px' => '50vw'], [
				'class' => 'image ' . $image_position
			]); ?>
		</div>
	<?php endif ?>

	<?php if ($fifty_fifty_size == 'content-width'): ?>
	</div><!-- /.container -->
	<?php endif; ?>

</div><!-- /.module-50-50 -->

<?php // if the video URL has a value include the modal to play video
	if ( $video_url ): ?>
	<!-- Modal -->

	<div class="modal modal-move" id="modal-5050" aria-hidden="true">

		<div class="modal-backdrop" tabindex="-1" data-a11y-dialog-hide></div>

		<div class="modal-dialog" role="dialog" aria-labelledby="modal-5050-title">

			<div class="modal-header">
				<button type="button" class="btn-reset" data-a11y-dialog-hide aria-label="Close this dialog window">
					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path fill="#FFF" fill-rule="evenodd" d="M24.704.565L14.077 11.193 4.541.565a1.934 1.934 0 0 0-2.734 2.733l9.536 10.629L.566 24.7A1.934 1.934 0 0 0 3.3 27.435L13.93 16.81l9.537 10.624a1.93 1.93 0 1 0 2.73-2.734l-9.54-10.624L27.434 3.3a1.93 1.93 0 1 0-2.73-2.733z"/></svg>
				</button>
			</div>

			<div class="modal-content" role="document">

				<h1 id="modal-5050-title" class="sr-only">Watch a video</h1>

				<div class="embed-container" data-video-embed="<?php echo htmlentities(add_iframe_attrs($video_url)); ?>">
				</div>

			</div>
		</div>

	</div>
<?php endif;?>