<?php /* NOTE: GENERATED BY GULP !!! */ ?><?php
$b = "flo-block-mosaic-image-links-1"; // To be used inside HTML

// Start: Class name automation
  $b__for_css = ".".$b; // To be used inside CSS
  $b__uniq = $b."--".mt_rand(1, 999); // To be used inside HTML
  $b__uniq_for_css = ".".$b__uniq; // To be used inside CSS
// End: Class name automation

// A. Title Area
$title_elements_color = flo_data($data, "title_elements_color");
$pre_title = flo_data($data, "pre_title");
$pre_title_font = flo_data($data, "pre_title_font");
$title = flo_data($data, "title");
$title_font = flo_data($data, "title_font");
// B. Left Side Images
$left_side_image_links = flo_data($data, "left_side_image_links");
$left_big_image_link_font = flo_data($data, "left_big_image_link_font");
$left_small_images_links_font = flo_data($data, "left_small_images_links_font");
// C. Right Side Images
$right_side_image_links = flo_data($data, "right_side_image_links");
$right_big_image_link_font = flo_data($data, "right_big_image_link_font");
$right_small_images_links_font = flo_data($data, "right_small_images_links_font");
// D. Additional Settings
$image_links_color = flo_data($data, "elements_color");
$left_and_right_image_overlay_color = flo_data($data, "left_and_right_image_overlay_color");
$overlay_opacity = flo_data($data, "overlay_opacity") / 100;

// Mobile Options;

$mobile_gap = flo_data($data, "gap_between_images") / 16;

?>

<?php echo $__env->make('core.style', [
  "breakpoint__general" => "

    /* START: Title Area */

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__pre-title",
      $pre_title_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__title",
      $title_font
      )
      ."

      ".$b__uniq_for_css." ".$b__for_css."__title-area {
        color: ".$title_elements_color.";
      }

    /* END: Title Area */

    /* START: Left Side */

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__left-side-image:not(:last-child)",
      $left_small_images_links_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__left-side-image:last-child",
      $left_big_image_link_font
      )
      ."

    /* END: Left Side */

    /* START: Right Side */

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__right-side-image:first-child",
      $right_big_image_link_font
      )
      ."

      ".
      flo_render_typography_styles(
      $b__uniq_for_css." ".$b__for_css."__right-side-image:not(:first-child)",
      $right_small_images_links_font
      )
      ."

    /* END: Right Side */

    ".$b__uniq_for_css." ".$b__for_css."__images-area {
      color: ".$image_links_color.";
    }

    ".$b__uniq_for_css." ".$b__for_css."__image-overlay {
      background-color: ".$left_and_right_image_overlay_color.";
      opacity: ".$overlay_opacity.";
    }

  ",

  "breakpoint__small_only" => "


    /* START: Left Side Images */

      ".$b__uniq_for_css." ".$b__for_css."__left-side-image:first-child {
        margin-right: ".$mobile_gap."rem;
      }

      ".$b__uniq_for_css." ".$b__for_css."__left-side-image:last-child {
        margin-bottom: ".$mobile_gap."rem;
      }

      ".$b__uniq_for_css." ".$b__for_css."__left-side-image:not(:last-child) {
        width: calc(50% - ".$mobile_gap / 2 ."rem);
        margin-bottom: ".$mobile_gap."rem;
      }

    /* END: Left Side Images */

    /* START: Right Side Images */

      ".$b__uniq_for_css." ".$b__for_css."__right-side-image:first-child {
        margin-bottom: ".$mobile_gap."rem;
      }

      ".$b__uniq_for_css." ".$b__for_css."__right-side-image:not(:first-child) {
        width: calc(50% - ".$mobile_gap / 2 ."rem);
      }

      ".$b__uniq_for_css." ".$b__for_css."__right-side-image:nth-child(2) {
        margin-right: ".$mobile_gap."rem;
      }

    /* END: Right Side Images */

  "
], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php $__env->startSection('block_content'); ?>
  <div class="<?php echo $b; ?> <?php echo $b__uniq; ?>">
    <?php if($pre_title or $title): ?>
      <div class="<?php echo $b; ?>__title-area">
        <?php if($pre_title): ?>
          <h3 class="<?php echo $b; ?>__pre-title"><?php echo $pre_title; ?></h3>
        <?php endif; ?>
        <?php if($title): ?>
          <h2 class="<?php echo $b; ?>__title"><?php echo $title; ?></h2>
        <?php endif; ?>
      </div>
    <?php endif; ?>
    <div class="<?php echo $b; ?>__images-area">
      <div class="<?php echo $b; ?>__left-side-images-area">
        <?php if($left_side_image_links): ?>
          <?php foreach($left_side_image_links as $index => $single_left_side_image_link): ?>
            <?php
              $left_side_image = flo_data($single_left_side_image_link, "image");
              $left_side_image_link = flo_data($single_left_side_image_link, "image_link");

              if($index < 2) { // small images
                $img_sizes = array(
                 'mobile' => array('width' => 300, 'height' => 999),  // mobile size
                 'tablet' => array('width' => 280, 'height' => 999), // tablet size
                 'desktop' => array('width' => 528, 'height' => 999),
                );
              }
              else  { //big image size
                $img_sizes = array(
                 'mobile' => array('width' => 780, 'height' => 520),  // mobile size
                 'tablet' => array('width' => 584, 'height' => 999), // tablet size
                 'desktop' => array('width' => 1094, 'height' => 9999),
                );
              }

              $img_vars = generate_srcsets($left_side_image['url'], $img_sizes, $crop = false);

            ?>

            <div class="<?php echo $b; ?>__left-side-image">

              <div class="<?php echo $b; ?>__image-overlay"></div>

              <div class="<?php echo $b; ?>__image-wrap">
                <img class="<?php echo $b; ?>__image"
                  data-src="<?php echo $left_side_image['url']; ?>"
                  data-srcset="<?php echo $img_vars['srcsets']; ?>"
                  sizes="<?php echo $img_vars['sizes']; ?>"
                  alt="<?php echo $left_side_image['alt']; ?>"
                />
              </div>

              <?php if($left_side_image_link): ?>
                <a href="<?php echo $left_side_image_link['url']; ?>" class="<?php echo $b; ?>__left-side-image-link" target="<?php echo $left_side_image_link['target']; ?>">
                  <?php echo $left_side_image_link['title']; ?>

                </a>
              <?php endif; ?>

            </div>

          <?php endforeach; ?>
        <?php endif; ?>
      </div>

      <div class="<?php echo $b; ?>__right-side-images-area">
        <?php if($right_side_image_links): ?>
          <?php foreach($right_side_image_links as $index => $single_right_side_image_link): ?>
            <?php
              $right_side_image = flo_data($single_right_side_image_link, "image");
              $right_side_image_link = flo_data($single_right_side_image_link, "image_link");

              if($index > 0) { // small images
                $img_sizes = array(
                  'mobile' => array('width' => 300, 'height' => 999),  // mobile size
                  'tablet' => array('width' => 280, 'height' => 999), // tablet size
                  'desktop' => array('width' => 528, 'height' => 999),
                );
              }  else { //big image
                $img_sizes = array(
                  'mobile' => array('width' => 780, 'height' => 520),  // mobile size
                  'tablet' => array('width' => 584, 'height' => 999), // tablet size
                  'desktop' => array('width' => 1094, 'height' => 9999),
                );
              }
              $img_vars = generate_srcsets($right_side_image['url'], $img_sizes, $crop = false);
            ?>

            <div class="<?php echo $b; ?>__right-side-image">

              <div class="<?php echo $b; ?>__image-overlay"></div>

              <div class="<?php echo $b; ?>__image-wrap">
                <img class="<?php echo $b; ?>__image"
                  data-src="<?php echo $right_side_image['url']; ?>"
                  data-srcset="<?php echo $img_vars['srcsets']; ?>"
                  sizes="<?php echo $img_vars['sizes']; ?>"
                  alt="<?php echo $right_side_image['alt']; ?>"
                />
              </div>

              <?php if($right_side_image_link): ?>
                <a href="<?php echo $right_side_image_link['url']; ?>" class="<?php echo $b; ?>__right-side-image-link" target="<?php echo $right_side_image_link['target']; ?>">
                  <?php echo $right_side_image_link['title']; ?>

                </a>
              <?php endif; ?>

            </div>

          <?php endforeach; ?>
        <?php endif; ?>
      </div>

    </div>
  </div>
<?php $__env->stopSection(true); ?>

<?php echo $__env->make('layout.block', [
  "block_classes" => "", // Will be added to main block div. e.g. flo-block--full-width
   "data_onready" => "flo_block_mosaic_image_links_1" // Specify a function (see _blank.js on how to define) that will be executed on document ready.
], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>