How to create a responsive card with an image ?

<div className={classes.card}>
                    <Image src={newsHomepageImg} alt="page d'accueil du site d'information" className={classes.mainImg} />
                    <div className='d-flex gap-05 align-items-center'>
                        <Image src={frontendmentorLogo} className={classes.logo} alt="logo de l'entreprise frontendmentor.io" />
                        <div className={classes.text}>
                            <p className={classes.title}>Page d'accueil d'informations</p>
                            <p className={classes.description}>Frontend mentor</p>
                        </div>
                    </div>
                    <div className='d-flex w-100'>
                        <a className={classes.button} href="https://lordyner.github.io/news-homepage/" target="blank">
                            Visitez le site
                        </a>
                    </div>
                </div>

.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) -6px -1px 1px -17px;
    transition: .2s ease-in-out;
    color: #fff;
    border: 1px solid #fff;

}

.mainImg {
    object-fit: cover;
    width: 100%;
    height: 10rem;
    aspect-ratio: 2.5;
}