<section class="fx-section">
    <div class="fx-card">
        <div class="fx-card__title">Lorem ipsum dolor sit amet</div>
        <div class="fx-card__content">
            <div class="fx-card__content-image">
                <img src="https://picsum.photos/200/300" alt="image">
            </div>
            <div class="fx-card__content-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam
                    tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl. Sed euismod, nunc ut
                    aliquam tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl.</p>
            </div>
        </div>
    </div>
    <div class="fx-card">
        <div class="fx-card__title">Lorem ipsum dolor sit amet</div>
        <div class="fx-card__content">
            <div class="fx-card__content-image">
                <img src="https://picsum.photos/200/300" alt="image">
            </div>
            <div class="fx-card__content-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam
                    tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl. Sed euismod, nunc ut
                    aliquam tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl.</p>
            </div>
        </div>
    </div>
    <div class="fx-card">
        <div class="fx-card__title">Lorem ipsum dolor sit amet</div>
        <div class="fx-card__content">
            <div class="fx-card__content-image">
                <img src="https://picsum.photos/200/300" alt="image">
            </div>
            <div class="fx-card__content-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam
                    tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl. Sed euismod, nunc ut
                    aliquam tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl.</p>
            </div>
        </div>
    </div>
</section>
/* [SECTIONS] */
.fx-section {
    background-color     : #ececec;
    padding-block        : 20px;
    padding-inline       : 10px;
    margin               : 0;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap             : 20px;
    grid-template-rows   : repeat(auto-fit, minmax(200px, 1fr));
}

/* [CARD] */
.fx-card {
    background-color: #fff;
    border          : 1px solid #e0e0e0;
    border-radius   : 10px;
    padding         : 20px;
    margin          : 0;
    font-size       : 14px;
    font-family     : 'Roboto', sans-serif;
}

.fx-card__title {
    font-size  : 14px;
    line-height: 1.5;
    font-weight: 700;
    margin     : 0 0 1.5rem 0;
}

.fx-card__content-image {
    display      : block;
    width        : 100%;
    height       : auto;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.fx-card__content-image img {
    width          : 100%;
    height         : 15em;
    object-fit     : cover;
    object-position: center;
    border-radius  : 10px;
}

/* [SECTION AND CARD MF @media tablet] */
@media (min-width: 768px) {
    .fx-section {
        padding-block: 40px;
    }

    .fx-card {
        font-size: 16px;
    }

    .fx-card__title {
        font-size: 16px;
    }
}

/* [SECTION AND CARD MF @media desktop] */
@media (min-width: 1200px) {
    .fx-section {
        padding-block: 60px;
    }

    .fx-card {
        font-size: 18px;
    }

    .fx-card__title {
        font-size: 18px;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.