[html]<style>
newscont {
top: 20px;
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
gap: 20px;
min-height: 200px;
position: relative;
padding: 10px;
object-fit: cover;
    padding: 0px 20px 10px 90px;
    box-sizing: border-box;
border-radius: 15px;
background: white;
border: 2px solid #949596;
    margin-bottom: 40px !important;
}

newscont::before {
    content: 'NEWS';
    position: absolute;
    font-weight: 900;
    font-size: 50px;
    display: block;
top: -42px;
    color: #949596;
    right: 30px;
    overflow: hidden;
    z-index: 0;
    clip-path: inset(0 0 35% 0);
}

newscont::after {
    content: attr(data-title);
    height: fit-content;
    width: fit-content;
    font: 700 26px verdana;
    padding: 10px 20px;
    background: rgb(255 255 255 / 42%);
    position: absolute;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
    left: -41px;
    top: 40px;
    color: #444444;
    border-radius: 0px 14px 0px 14px;
    transform: rotate(90deg);
z-index: 4;
}

newscont > img.news-left-elem  {
height: 100%;
width: 70px;
position: absolute;
background-size-x: 100%;
left: 0px;
top: 0px;
object-fit: cover;
border-radius: 13px 0 0 13px;
filter: brightness(1.3) grayscale(.5) contrast(.5);
z-index: 3;
}

newscont > img.news-bg  {
height: 100%;
width: 100%;
position: absolute;
background-size-x: 100%;
left: 0px;
top: 0px;
object-fit: cover;
border-radius: 13px 0 0 13px;
filter: brightness(1.3) grayscale(.5) contrast(.3) opacity(.2);
}

newsblock img.news-adm-gif {
    max-width: 300px;
    max-height: 300px;
    border-radius: 13px;
    margin: 7px 25px 7px 0;
    float: left;
   object-fit: contain;
}

newstitle {
display: flex;
justify-content:center;
z-index: 4;
width: 100%;
}

newstitle span {
    background: white;
    display: block;
    text-align: center;
    font: 900 17px mulish;
    color: #00000087;
    border-radius: 0 0 20px 20px;
    max-width: 500px;
    padding: 10px 40px !important;
}

newsblock {
display: block;
z-index: 4;
line-height: 170%;
}

miniblock {
display: block;
margin: 10px!important;
padding: 5px 15px;
background: white;
border-radius: 10px;
overflow: hidden;
}

</style>

<newscont data-title='12/04'>

<!------- картинка сбоку ---------------------------------------------->
<img class='news-left-elem'  src=https://i.pinimg.com/736x/e5/97/c2/e597c2c4f43c333006509489218e11de.jpg />

<!------- фон новости (можно удалить) ---------------------------------------------->
<img class='news-bg' src=https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjEwMTMtcC0wMDE5ZC0wMS1rc2k4YjVqbi5qcGc.jpg />

<!------- заголовок ---------------------------------------------->
<newstitle><span>
вирусный заголовок любой произвольной длины, типа:<br>
💌 // мы открылись!
</span></newstitle>

<!------- текст и картинка новости ---------------------------------------------->
<newsblock>
<img class='news-adm-gif' src=https://i.imgur.com/bSLobB7.gif />

Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад.
<miniblock>На случай, если понадобится врезать в текст важную пометку или ремарку </miniblock>
Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32
<miniblock>Имейте ввиду: хотя тут html, бОльшая часть разметки bb-кодов из формы ответа поддерживается, включая шрифты, размеры шрифтов, вставку картинок и тому подобное.</miniblock>

Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

<miniblock> тест

 
 
 

</miniblock>

Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

</newsblock>

</newscont>

[/html]