<!-- RECENT BLOG POSTS -->
<?php
$recentargs = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'category_name' => 'social-grid',
    'posts_per_page' => $number_of_recent_posts,
    'orderby' => 'post_date',
    'order' => 'DESC'
);
$rec_arr_posts = new WP_Query( $recentargs );

if ( $rec_arr_posts->have_posts() ) :

    while ( $rec_arr_posts->have_posts() ) :
        $rec_arr_posts->the_post();
    ?>
        <div class="gys-cube gys-blog-cube" style="
            <?php
            if ($grid_padding != '') : ?>
                padding: calc(<?php echo $grid_padding ?>px / 2);
            <?php endif; ?>
        ">
            <div class="cube-inner" style="
                <?php
                if ($grid_padding != '') : ?>
                    padding: calc(<?php echo $grid_padding ?>px * 2);
                <?php endif; ?>
                <?php
                if ($font_color != '') : ?>
                    color: <?php echo $font_color; ?>;
                <?php endif; ?>
                <?php
                if ($font_size != '') : ?>
                    font-size: <?php echo $font_size; ?>px;
                <?php endif; ?>
                <?php
                if ($default_background_color != '') : ?>
                    background-color: <?php echo $default_background_color; ?>;
                <?php endif; ?>
                <?php
                if ( has_post_thumbnail() ) : ?>
                    background-image: url('<?php get_the_post_thumbnail_url(); ?>');
                <?php endif; ?>

                <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                    background-image: url('<?php echo $image[0]; ?>');
                <?php endif; ?>
            ">

                <a href="<?php the_permalink(); ?>" class="box-link" target="_blank"></a>
                <div class="cube-inner-hover" style="
                    <?php
                    if ($transition_speed != '') : ?>
                        -webkit-transition: background-color <?php echo $transition_speed; ?>s ease-out;
                        -moz-transition: background-color <?php echo $transition_speed; ?>s ease-out;
                        -o-transition: background-color <?php echo $transition_speed; ?>s ease-out;
                        transition: background-color <?php echo $transition_speed; ?>s ease-out;
                    <?php endif; ?>
                "></div>
                <p class="tweet-text">
                    <span class="tweet-text-title"><?php the_title(); ?></span>
                    <?php echo get_the_excerpt(); ?>
                </p>
            </div>
        </div>
    <?php endwhile; ?>

<?php endif; ?>

<?php wp_reset_postdata(); ?>
<!-- END RECENT BLOG POSTS -->

<!-- RANDOM BLOG POSTS -->
<?php
$randomargs = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'category_name' => 'social-grid',
    'posts_per_page' => $number_of_random_posts,
    'offset' => $number_of_recent_posts,
    'orderby' => 'rand',
    'order' => 'DESC'
);
$rand_arr_posts = new WP_Query( $randomargs );

if ( $rand_arr_posts->have_posts() ) :

    while ( $rand_arr_posts->have_posts() ) :
        $rand_arr_posts->the_post();
    ?>
        <div class="gys-cube gys-blog-cube" style="
            <?php
            if ($grid_padding != '') : ?>
                padding: calc(<?php echo $grid_padding ?>px / 2);
            <?php endif; ?>
        ">
            <div class="cube-inner" style="
                <?php
                if ($grid_padding != '') : ?>
                    padding: calc(<?php echo $grid_padding ?>px * 2);
                <?php endif; ?>
                <?php
                if ($font_color != '') : ?>
                    color: <?php echo $font_color; ?>;
                <?php endif; ?>
                <?php
                if ($font_size != '') : ?>
                    font-size: <?php echo $font_size; ?>px;
                <?php endif; ?>
                <?php
                if ($default_background_color != '') : ?>
                    background-color: <?php echo $default_background_color; ?>;
                <?php endif; ?>
                <?php
                if ( has_post_thumbnail() ) : ?>
                    background-image: url('<?php get_the_post_thumbnail_url(); ?>');
                <?php endif; ?>

                <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                    background-image: url('<?php echo $image[0]; ?>');
                <?php endif; ?>
            ">

                <a href="<?php the_permalink(); ?>" class="box-link" target="_blank"></a>
                <div class="cube-inner-hover" style="
                    <?php
                    if ($transition_speed != '') : ?>
                        -webkit-transition: background-color <?php echo $transition_speed; ?>s ease-out;
                        -moz-transition: background-color <?php echo $transition_speed; ?>s ease-out;
                        -o-transition: background-color <?php echo $transition_speed; ?>s ease-out;
                        transition: background-color <?php echo $transition_speed; ?>s ease-out;
                    <?php endif; ?>
                "></div>
                <p class="tweet-text">
                    <span class="tweet-text-title"><?php the_title(); ?></span>
                    <?php echo get_the_excerpt(); ?>
                </p>
            </div>
        </div>
    <?php endwhile; ?>

<?php endif; ?>

<?php wp_reset_postdata(); ?>
<!-- END RANDOM BLOG POSTS -->