[html]

<style>

  .wrapper {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-auto-flow: dense;
    /* grid-gap: 1em; */
    break-inside: avoid;
    align-content: stretch;
    justify-content: center;
    justify-items: center;
  }

  /* LEFT PANEL */
  .left-panel {
    flex: 1;
    background-image: url('https://i.imgur.com/WhhvdYG.png');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  .n54-news {
     width: auto;
     height: auto;
     line-height: 9.1vw;
     margin: 0 0 50px 0;
    }

   .n54-news img {
    position: relative;
    top: -130%;
    left: 245%;
    width: 50px;
    height: auto;
    display: block;
    box-shadow: 5px 5px 20px rgba(255, 0, 0, 0.7);
    border-radius: 5px;
    }
   
  .gradient-bar {
    background-color: #5d0dfdb3;
    padding: 10px 0;
    margin-top: 2em;
    box-shadow: inset 60px 0 120px #f0f, inset -60px 0 120px #0ff;
}

.bar-news {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;

}

  .news-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.5em;
    color: white!important;
    margin-top: 1em;
    font:100 16px var(--huehuefont)!important;
text-shadow: 1px 1px 0px grey, -1px -1px 0px grey;
  }

  /* RIGHT PANEL */
  .right-panel {
    padding: 30px 0;
    background-color: #80263124;
   
  }

  .tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    margin-top: -70px;
  }

  .tab-button {
height:25px;
    background-color: #c80538;
    margin: 0.5em 0.5em 0.5em 1em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    border: 2px solid #c80538;
    color: #fff;
    padding: 4px 20px;
    cursor: pointer;
    transition: ease-in-out 0.5s;
    box-shadow: 0 0 0 #fb3ae3;
}
 
  .tab-button:hover {
    background-color: #ff003c;
    border: 2px solid #edbb38;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    }
 
    @-webkit-keyframes glow {
      from {
        box-shadow: 0 0 0.75em #edbb38;
      }
      to {
        box-shadow: 0 0 1.5em #edbb38;
      }
    }
   
    @keyframes glow {
      from {
        box-shadow: 0 0 0.75em #edbb38;
      }
      to {
        box-shadow: 0 0 1.5em #edbb38;
      }
    }

  .article-content {
        font-size: 1em;
    line-height: 1.6;
    width: 340px;
    height: 300px;
    overflow: auto;
    /* border: 1px solid #000; */
    padding: 5px 0 5px 0;
  }

  .first-letter::first-letter {
    margin-top: 5px;
    font-size: 25px;
    padding: 0 2px 0 0;
    margin-right: 20px;
    float: left;
    color: #ff0000;
    font-weight: 900;
    text-shadow: 1px 1px 1px black, 2px 2px 2px #0e028c;
  }
 
  .article-content p {
    margin-bottom: 20px;
    font-family: var (--main-font);
  }

</style>

<div class="wrapper">
  <!-- Левая панель -->
  <nav class="left-panel">
    <div class="n54-news">
<img src="https://i.imgur.com/Cuavge5.png" alt="N54 news logo">
</div>
    <div class="gradient-bar">
      <div class="bar-news">
      <p class="news-title">Пьяные хулиганы захватили небо над Найт-Сити. Корпорации подсчитывают убытки.</h2>
      </div>
    </div>
  </nav>

  <!-- Правая панель -->
  <nav class="right-panel">
    <div class="tabs">
      <button class="tab-button">Date</button>
      <button class="tab-button">Date</button>
      <button class="tab-button">Date</button>
    </div>
    <div class="article-content">
      <p class="first-letter">Сегодня ночью жители Найт-Сити стали свидетелями необычного зрелища: вместо привычных рекламных голограмм над центром города на несколько минут появились изображения двух неизвестных молодых людей. Несмотря на то, что их лица были размытыми, косвенные признаки указывают на то, что они с большой вероятностью находились в нетрезвом состоянии.</p>
      <p>По предварительным данным, злоумышленникам, чьи личности пока не установлены, удалось взломать систему городских проекций, заменив рекламные сообщения ведущих корпораций на провокационные изображения. Инцидент продолжался около двадцати минут, но всё же обернулся серьёзными убытками для арендаторов рекламных мест.</p>
      <p>Общие потери крупнейших корпораций, среди которых Арасака, Кан Тао, Милитех и многие другие, оцениваются в несколько миллионов евродолларов. Работа системы была восстановлена в кратчайшие сроки, однако пострадавшие от действий злоумышленников корпорации уже подали иски о компенсации, а отдел полиции по борьбе с киберпреступностью уже начал расследование. По их мнению, то, что выглядело пьяной проделкой двух талантливых выдумщиков, на самом деле являлось продуманной кибератакой.</p>
      <p>В сети уже разгорелись бурные обсуждения, а мемы заполонили городские форумы. Некоторые утверждают, что это «новая форма цифрового протеста», но официальные источники никаких комментариев не дают.
      </p>
    </div>
  </nav>

[/html]

Подпись автора

подпись с картинкой в правом углу