Genesis Flipping Column Custom Post Type Loop

flip.js

 $('.flipboard').hover(function(e) {
        $(this).find('.card').toggleClass('flipped');
    });

functions.php

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'loop_content' );

function loop_content() {
    
    
  	global $post;
 
$loop = new WP_Query(array(
    
        'post_type' =>  'custom_post_type_name', /*Call Custom Post Type*/
        'posts_per_page' => -1,
        'tax_query' => array(
		array(
			'taxonomy' => 'taxonomy_type', /* Filter with Taxonomy*/
			'field'    => 'slug',
			'terms'    => 'board',
		),
	)
    ));
    
  
    
    $first ='first';
    $counter = 1;
    
   
    while ($loop->have_posts()): $loop->the_post();
    $content = get_field('content');  /* acf custom field */
    $position = get_field('position'); /* acf custom field */
    ?>
  
   <div class="one-third <?php if ($counter % 3 == 1) { echo $first; }  ?>" >
        <div class="flipboard">
            <div class="card">
                <div class="face back">
                    
            
           <h3><?php echo esc_html( get_the_title() ); ?></h3>
           <h5><?php echo $position; ?></h5>
           <p><?php echo $content; ?></p>
            <p><a href="<?php echo get_the_permalink(); ?>">View Full Details</a></p>
                </div>
                 <div class="face front">
            
                 <?php 
            
            echo get_the_post_thumbnail($post->ID); 
                    
                ?>
            
            
                </div>
             </div>
        </div>
    </div>
    
    <?php
    $counter++;
    endwhile; 
    wp_reset_query();
 ?>
 <div class="clear"></div>

styles.css

.flipboard {
    cursor: pointer;
    width: 300px;
    height: 400px;
    margin: 50px auto;
    -webkit-perspective: 800;
}
.flipboard .flipped {
    /* the actual animation */
    -webkit-transform: rotateX(-180deg); 
}
.flipboard .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}
.flipboard .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
}
.flipboard .card .front {
    background: black;
    color: white;
}
.flipboard .card .back {
    background: white;
    color: black;
    /* rotate the back card upside-down */
    -webkit-transform: rotateX(180deg);
}