<!--[single/post-infozoid-posts]-->

<?php

    $option = get_option("infozoid_posts");
    $posts = [];

    if(isStringJson($option)){

        $posts = json_decode($option);

    }

?>
<?php if(count($posts) !== 0): ?>

    <style>
        .infozoid__category{
            margin-left:12px;
        }
        .infozoid__category:before {
            content: '';
            position: absolute;
            top: -4px;
            bottom: -3px;
            left: -5px;
            right: -5px;
            -webkit-transform: skew(-15deg);
            -ms-transform: skew(-15deg);
            transform: skew(-15deg);
            background: #4c5866;
            z-index:1;
        }
        .infozoid__category span{
            display: inline-block;
            position:relative;
            padding:0 2px 2px 2px;
            line-height:1px;
            font-weight: bold;
            z-index:2;
            color:#fff;
            text-transform: uppercase;
            color:#fff;
            font-family: 'PT Sans Narrow', sans-serif;
        }
    </style>

    <div class="row mb-5 d-md-none">

    <?php foreach ($posts as $post): ?>

        <a target="_blank" href="<?= $post->link ?>" class="col col-6 p-0" style="border:8px solid #303030;position: relative;">
            <img loading="lazy" alt="<?= $post->title ?>" src="<?= $post->image ?>" style="width:100%!important;" />
            <div style="position:absolute;z-index:10;left:0;bottom:0;width:100%;">
                <span class="infozoid__category position-relative">
                    <span>
                        <?= $post->category ?>
                    </span>
                </span>
                <h6 style="line-height:1;padding:4px;text-transform: uppercase; font-family: 'PT Sans Narrow', sans-serif; color:#000; text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff;">
                    <?= $post->title ?>
                </h6>
            </div>
        </a>

    <?php endforeach; ?>

    </div>

<?php endif; ?>
<!--[/single/post-infozoid-posts]-->
