[MINHA SOLUÇÃO]

CardPost.module.css

.articleContainer {
    display: flex;
    flex-direction: column;
}

.headerContainer {
    background-color: gray;
    border-radius: 8px 8px 0 0;
    width: 438px;
}

.sectionContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    background-color: #171D1F;
    width:438px;
}

.textContainer {
    margin: 3px 16px 16px 16px;
    color: #BCBCBC;
}

.footerContainer {
    background-color: #171D1F;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: end;
    color: #BCBCBC;
    font-weight: 600;
}

.image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 360px;
    height: 95px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

Avatar.module.css

.avatarContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

Index CardPost

import Image from "next/image"
import { Avatar } from "../Avatar/Index"
import style from './CardPost.module.css'

export const CardPost = ({ post }) => {
    return(
        <article className={style.articleContainer}>
            <header className={style.headerContainer}>
                <figure >
                    <Image className={style.image} src={post.cover} width={438} height={133} alt={`capa do post do titulo ${post.title}`}/>
                </figure>
            </header>
            <section className={style.sectionContainer}>
                <div className={style.textContainer}>
                    <h2>{post.title}</h2>
                    <p>{post.body}</p>
                </div>
            </section>
            <footer className={style.footerContainer}>
                <Avatar 
                    imageSrc={post.author.avatar} 
                    name={post.author.username}
                />
            </footer>
        </article>
    )
}