ACF Relationship - Shortcode

ACF_Relationship_WP.php

<?php
/* Recent Post | image */
function show_related_posts($atts) {
    $atts = shortcode_atts(array(
        'post_id' => get_option('page_on_front'), 
    ), $atts);

    $related_post_ids = get_field('recent_post', $atts['post_id']);

    if ($related_post_ids) {
        $output = '';

        foreach ($related_post_ids as $post_id) {
            $post = get_post($post_id);

            $title = get_the_title($post);
            $excerpt = wp_trim_words(get_the_excerpt($post), 10); 
            $link = get_permalink($post);

            $thumbnail = wp_get_attachment_image(get_post_thumbnail_id($post), 'medium');

            $output .= '<div class="related-entry-ff">';
            // Agregar la miniatura a la izquierda
            $output .= '<div class="entry-thumbnail left-ff">' . $thumbnail . '</div>';
            $output .= '<div class="entry-content right-ff">';
            $output .= '<h2>' . esc_html($title) . '</h2>';
            $output .= '<p>' . esc_html($excerpt) . '</p>';
            $output .= '<a href="' . esc_url($link) . '" class="button-ff">READ MORE</a>';
            $output .= '</div>';
            $output .= '<div class="clear-ff"></div>'; 
            $output .= '</div>';
            $output .= '<hr>'; 
        }

        return $output;
    }

    return 'No related posts found on the homepage.';
}
add_shortcode('related_posts', 'show_related_posts');

styles.css

/* RECENT POST */
.related-entry-ff {display: flex; align-items: center; padding: 20px}
.entry-thumbnail {margin-right: 20px; flex: 0 0 auto;}
.entry-content {flex: 1;}
.clear-ff {clear: both;}
.related-entry-ff h2{font-family: "Quicksand", Sans-serif !important; font-size: 28px;font-weight: 700;}