60/before.html

<!DOCTYPE html>
<html class="page" lang="ru">
<head>
    <title>Карточка на модификаторах</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Page */

        .page {
            font-family: sans-serif;
        }

        .page__body {
            margin: auto;
            width: 500px;
            display: grid;
            row-gap: 20px;
        }

        /* News */

        .news {
            display: grid;
            background-color: paleturquoise;
        }

        .news--photo {
            grid-template-columns: 1fr 2fr;
            background-color: lightgreen;
        }

        .news--shout {
            background-color: peachpuff;
        }

        /* News Title */

        .news__title {
            margin: 0;
            padding: 15px;
            font-weight: normal;
            font-size: 20px;
        }

        .news__title--shout {
            font-size: 25px;
        }

        /* News Lead */

        .news__lead {
            margin: 0;
            padding: 15px;
            padding-top: 0;
        }

        /* News Picture */

        .news__picture {
            max-width: 100%;
            order: -1;
            grid-row: span 2;
            align-self: stretch;
        }
    </style>
</head>
<body class="page__body">
    <article class="news">
        <h3 class="news__title">В Харькове котята подкараулили хозяина за дверью. А потом навалились на него все разом</h3>
        <p class="news__lead">В Харькове прошел дождь из котят: рыжих, черных и черно-белых. Малыши прятались в комнате, поэтому когда хозяин (или человек, взявший их на передержку) открыл дверь, на него с мяуканьем вывалился с десяток котят одновременно.</p>
    </article>
    <article class="news news--photo">
        <h3 class="news__title">В Харькове котята подкараулили хозяина за дверью. А потом навалились на него все разом</h3>
        <img class="news__picture" src="picture.svg" alt="">
        <p class="news__lead">В Харькове прошел дождь из котят: рыжих, черных и черно-белых. Малыши прятались в комнате, поэтому когда хозяин (или человек, взявший их на передержку) открыл дверь, на него с мяуканьем вывалился с десяток котят одновременно.</p>
    </article>
    <article class="news news--shout">
        <h3 class="news__title news__title--shout">В Харькове котята подкараулили хозяина за дверью. А потом навалились на него все разом</h3>
    </article>
</body>
</html>