[html]
<style>

@font-face {
  font-family: 'Corbel';
  src: url('https://forumstatic.ru/files/001c/17/76/83460.ttf')
}

.rogue-episode-wrapper {
    width:98%;
    height: 270px;
    background: linear-gradient(to top, #272B30 2%, transparent 60%),
                       radial-gradient(ellipse at top left, #3a6e92 0%, rgba(0, 0, 0, 0) 50%),
                       url(https://i.imgur.com/XW3pA6s.jpeg) center / cover no-repeat;
    position: relative;
    margin-left: 10px;
    box-shadow: 0 0 8px 2px #396a8b45;
    border-radius: 10px;
    overflow:hidden;
}

.rogue-episode-logo {
    position: absolute;
    right: 0px;
    top: 25px;
    background: linear-gradient(to left, #1a1b21db, #9cabb547);
    backdrop-filter: blur(7px);
    width: 100%;
    height: 57px;
    box-shadow: 0 0 8px 2px #396a8b35;
}

.rogue-date-place {
    display: flex
;
    flex-direction: column;
    position: absolute;
    top: 5px;
    right: 10px;
    width: 380px;
    height: 50px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    font: 500 16px corbel;
    flex-wrap: wrap;
    justify-content: space-around;

}

.rogue-date-place li:nth-child(odd) {
   height: 20px;
   width: 50%;
   font: 600 16px corbel;
   position:relative;
   text-transform: uppercase;
   background:linear-gradient(180deg, #ffffff, #60b0eb);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.rogue-date-place li:nth-child(even) {
   font: 500 14px corbel;
   background: none;
   color: #e7fbff;
   filter: drop-shadow(0px 0px 1px #00000060);
}

.rogue-episode-chars {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 340px;
    position: absolute;
    top: 40px;
    left: 15px;
    transition: ease-in-out .4s;
    flex-direction: row;
    flex-wrap: wrap;
}

.rogue-episode-chars a {
display:block;
width:100px;
height:100px;
box-shadow: 0 0 8px 2px #396a8b57;
border-radius: 2px;
scale: .8;
position:relative;
overflow:hidden;
transition:ease-in-out .3s;
}

.rogue-episode-chars a::after {
    content: attr(data-charname);
    position: absolute;
    display: flex;
    height: 20px;
    width: 100px;
    color: #c4d5dd;
    background: #6b869d5e;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    font: 600 12px corbel;
    letter-spacing: 1.5px;
    transform: translate(0px, 0px);
    bottom: -40px;
    transition:ease-in-out .4s;
}

.rogue-episode-chars a:hover::after {
    transition-delay: .4s;
    transform: translateY(-40px);
}

.rogue-episode-chars a:hover {
scale: 1;
}

.rogue-episode-chars a img {
object-fit:cover;
width:100%;
height:100%;
}

.rogue-episode-desc {
    position: absolute;
    width: 50%;
    text-align: justify;
    font: 200 14px corbel;
    color: #c4d5dd;
    bottom: 0px;
    right: 0px;
    padding: 10px 20px;
    /* margin: 10px 15px 5px; */
    background: #1d2a3447;
    backdrop-filter: blur(6px);
    box-shadow: -4px -3px 3px 0px #25282d38;
    border-radius: 2px;
}
</style>

<section class="rogue-episode-wrapper">
<div class='rogue-episode-logo'>
<ul class="rogue-date-place">
<li>Дата</li>
<li>dd.mm.yyyy</li>
<li>Место</li>
<li>Country, City, District</li>
</ul>
</div>

<div class='rogue-episode-chars'>
<a href='#' data-charname='Warden' class='first'><img src='https://i.imgur.com/2kNgpbm.png' /> </a>
<a href='#' data-charname='Kensei' class='second'> <img src='https://i.imgur.com/saIqX4s.png' /> </a>
<a href='#' data-charname='Raider' class='third'> <img src='https://i.imgur.com/iO5wwcL.png' /> </a>
</div>

<div class='rogue-episode-desc'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas.
</div>

</section>
[/html]

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

Текст Текст Текст