Card styling in ReactJS-CodePudding

I am working on a hiring page project to practice React and I can't figure out a way to style these cards properly

I want to style these cards in a way (sorry, I can't post images yet) that when I resize the page, inspect element, open in mobile view etc, it resizes on its own and not go outside the dimensions of the main page.

Code for Card component

const Card = () => {
    return openingData.map((el) => {
        return (
            <div className="card-container card">
                <div className="positions-container">{el.positions}</div>
                <div className="image-container">
                    <img src={el.logo} alt="" height="375" width="475" />
                </div>
                <div className="card-content">
                    <div clasName="title-container">
                        <b>
                            <h3>{el.title}</h3>
                        </b>
                    </div>
                    <div className="message-container">
                        <h5>{el.message}</h5>
                    </div>
                </div>
                <div className="button-container">
                    <button className="buttons btn">Join Now!</button>
                </div>
            </div>
        );
    });
};

Code for Card-list component

const CardList = () => {
    return (
        <div className="card-list">
            <Card />
        </div>
    );
};

CSS

.card-container {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(1, 1, 1, 0.922);
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
}

.card-container:hover {
    transform: scale(1.05);
}

.card-list {
    width: 85vw;
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

CodePudding user response：

You need to add globally

   img {
     max-width: 100%;
   }

CodePudding user response：

give appropriate dimensions to your card.container so that all the content can have their boundary by specifying max-width