Blogger gadget for Featured Posts

With the help of an IA, I developed the code for a Blogger gadget that displays three featured posts (title and image) in the sidebar. Ideally, it should have similar or identical graphics to the Popular Posts gadget, so that the two gadgets can be used together to create a Featured Posts + Popular Posts column on the right-hand side of the page.
This is an example of what I came up with:
https://www.wikipedate.com/2024/06/che-genere-di-enciclopedia-maschile_22.html
(in Italian, “In vetrina” is Featured posts and “Post più popolari” is Popular posts)
I spot three main issues:

1. The dimensions of the images are not equal to each other and are different from those displayed by Popular Posts.
2. My Featured Posts gadget uses fonts that are different from Popular Posts.
3. Popular Posts’ graphics is better because it leaves some space between each post; in my Featured Posts gadget, the three posts are crammed together.
   Here is the code I developed.

<div class="featured-posts-column">
    <ul class="featured-posts-list">
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2023/09/wikipedate-questo-blog-parte-2.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Wikipedate (Questo blog Parte 2)</b></span>  
            </a>
        </li>
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2023/11/kirk-lalba-delluomo.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Kirk. L'alba dell'uomo</b></span>  
            </a>
        </li>
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2024/03/appunti-sullantirecentismo-parte-2-la.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Appunti sull'antirecentismo, Parte 2. La cipolla</b></span>  
            </a>
        </li>
    </ul>
</div>

<style>
.featured-posts-column img {
    max-width: 100%; 
    height: auto;     
}

/* Equal Height for Featured Post Images */
.featured-post-image {
    height: 150px;      /* Adjust this to your desired height */
    object-fit: cover;  /* This ensures images maintain aspect ratio and cover the container */
}
</style>

<script>
function getFeaturedPostImage(postUrl) {
    const postLink = document.querySelector(`a[href="${postUrl}"]`);
    if (postLink) {
        const img = postLink.querySelector('.featured-post-image');
        if (img) {
            fetch(postUrl)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');

                    // Image Selectors 
                    let postImage;
                    if (postUrl.includes('wikipedate-questo-blog-parte-2')) {
                        postImage = doc.querySelector('.separator a img'); // First Post
                    } else if (postUrl.includes('kirk-lalba-delluomo')) {
                        postImage = doc.querySelector('.tr-caption-container a img'); // Second Post
                    } else if (postUrl.includes('appunti-sullantirecentismo-parte-2-la')) {
                        postImage = doc.querySelector('.tr-caption-container a img'); // Third Post (same as second)
                    }

                    if (postImage) {
                        img.src = postImage.src;
                        img.alt = postImage.alt || 'Immagine dal post in vetrina';
                    } else {
                        console.error("Opening image not found for:", postUrl);
                    }
                })
                .catch(error => console.error("Error fetching post:", postUrl, error));
        }
    }
}

document.querySelectorAll('.featured-post a').forEach(link => {
    getFeaturedPostImage(link.href);
});
</script>