[html]
<style>

/* тут можно поменять много цветов в шаблоне под нужные оттенки фона. Нужны градиенты? Вот хороший ресурсы: https://cssgradient.io/
Меня не обязательно, это опционал при желании. Вместо градиентов можно вставлять просто цвета. Не забывайте про полупрозрачность! */

:root {
/* цвета градиента "дата" и "место" */
--date-place-text-bg: linear-gradient(180deg, #ffffff, #60b0eb);

/* тут сложнее: мягкий смягчающий градиент поверх картинки фона. обратите внимание: их два через запятую. */
--ep-bg-grad:
                        linear-gradient(to top, #272B30 2%, transparent 60%),
                        radial-gradient(ellipse at top left, #3a6e92 0%, rgba(0, 0, 0, 0) 50%), transparent;

/* текст описания по центру: center / слева - left / растянут - justify */
--ep-desc-talign: left;

/* цвет фона описания */
--ep-desc-bg: #342d1d47;

/* цвет текста описания */
--ep-desc-clr:  #fff9f0;

/* ширина окна описания */
--ep-desc-width: 50%;

}

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

    .arc-episode-wrapper {
        width: 98%;
        height: auto;
        min-height: 270px;
        position: relative;
        margin-left: 10px;
        box-shadow: 0 0 18px 2px #04030147;
        border-radius: 10px;
        overflow: hidden;
    }

    .arc-episode-wrapper>img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        object-fit: cover;
    }

    .arc-episode-wrapper::before {
        content: '';
        background: var(--ep-bg-grad);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
    }

    .arc-episode-strip {
        position: absolute;
        right: 0px;
        top: 25px;
        background: linear-gradient(to left, #211d1a94, #a3a3a347);
        backdrop-filter: blur(5px);
        width: 100%;
        height: 57px;
        box-shadow: 0 0 12px 2px #bba52f1f;
        z-index: 2;
    }

    .arc-date-place {
    display: flex;
    flex-direction: row;
    position: absolute;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-end;
    top: 5px;
    right: 10px;
    width: 50%;
    height: 46px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    font: 500 16px corbel;
    }

    .arc-date-place li {
        font: 500 14px corbel;
        background: none;
        color: #f5efe6;
        filter: drop-shadow(0px 0px 1px #00000060);
        position: relative;
    }

    .arc-date-place li::before {
        content: attr(data-title);
        height: 20px;
        font: 600 16px corbel;
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
        top: -20px;
        text-transform: uppercase;
        background: var(--date-place-text-bg);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .arc-episode-chars {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* gap: 10px; */
        width: 340px;
        position: relative;
    margin-top: 40px;
margin-bottom: 20px;
        left: 15px;
        transition: ease-in-out .4s;
        flex-direction: row;
        flex-wrap: wrap;
        z-index: 2;
    }

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

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

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

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

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

    .arc-episode-desc_01 {
        position: absolute;
        width: 50%;
        text-align: var(--ep-desc-talign);
        font: 200 14px corbel;
        color: var(--ep-desc-clr);
        bottom: 0px;
        right: 0px;
        padding: 10px 20px;
        background: var(--ep-desc-bg);
        backdrop-filter: blur(6px);
        box-shadow: -4px -3px 14px 0px #ffd2892b;
        border-top-left-radius: 10px;
        z-index: 2;
    }

    .arc-episode-desc_02 {
        position: relative;
        width: var(--ep-desc-width);
        text-align: var(--ep-desc-talign);
        font: 200 14px corbel;
        color: var(--ep-desc-clr);
        bottom: 0px;
        left: 50%;
        transform: translatex(-50%);
        padding: 10px 20px;
        background: var(--ep-desc-bg);
        backdrop-filter: blur(6px);
        box-shadow: -4px -3px 14px 0px #ffd2892b;
        border-radius: 10px 10px 0 0;
        z-index: 2;
    }

    @media screen and (min-width: 320px) and (max-width: 540px) {
       

    .arc-episode-wrapper {
        height: auto;
        width: -webkit-fill-available;
        overflow: hidden;
}

.arc-date-place {
    right: 0px;
    width: 100%;
}

    .arc-episode-desc_01,
    .arc-episode-desc_02 {
    width: 100%;
    padding: 5px 15px;
    box-sizing: border-box;
    border-radius: 10px;
        position: relative;
    }

.arc-episode-chars {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;
        margin-top: 85px;
        left: 0px;
        top: 0px;
        transition: ease-in-out .4s;
        flex-direction: row;
        flex-wrap: wrap;
     }

}

</style>

<section class="arc-episode-wrapper">
    <img src='https://i.imgur.com/ENybzzr.png' /> <!--сюда свою картинку на фон (кавычки нужно оставить!)-->
    <div class='arc-episode-strip'>
        <ul class="arc-date-place">
            <li data-title='дата'>дд.мм.гггг</li> <!-- между <li>...</li> своя дата -->
            <li data-title='место'>Страна, Город</li> <!-- между <li>...</li> место событий -->
        </ul>
    </div>

    <div class='arc-episode-chars'>
        <!--
        В <a href> вместо '#' вставляется ссылка на профиль вида 'https://arc.ru/profile.php?id=2'
        В data-charname только короткое имя. Например, вместо "Мать-Создательница Авалон" - просто "Авалон"
        Строк <a href='#' data-charname='#'><img src='#' /> </a> может быть не больше 6 (шести)
Везде оставляем 'кавычки!'
    -->
        <a href='#' data-charname='Вампир'><img src='https://i.imgur.com/OnBGANj.png' /> </a>
        <a href='#' data-charname='Оборотень'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
        <a href='#' data-charname='Человек'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
        <a href='#' data-charname='Оборотень'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
        <a href='#' data-charname='Человек'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
        <a href='#' data-charname='Оборотень'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>

    </div>

    <!--Описание эпизода до 600 символов. Рекомендовано включить hideprofile - тогда влезет больше. _01 - описание по правому краю, _02 - по центру -->
    <div class='arc-episode-desc_01'>
        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.
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][hideprofile]