[html]<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  #ship3 {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto auto 2em;
    padding: 20px 0;
    background: url(https://forumupload.ru/uploads/001c/0c/35/2/154988.png) calc(100% + 130px) 50% no-repeat #c8c4b7;
    width: 650px;
    height: 400px;
  }

  .shipro {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 130%;
    color: #000;
    font-size: 11px;
    padding: 0 20px 0 10px;
  }

  .shipro > h5 {
    display: block;
    padding-bottom: 14px;
    margin-bottom: 14px;
    font-weight: 400;
    font-family: 'Alegreya SC', Times New Roman, serif;
    font-size: 22px;
    border-bottom: 1px dotted #c0aa8c;
  }

  .shiph1 {
    display: block;
    overflow: auto;
    padding-right: 4px;
    max-height: 100px;
  }

  .shiph1::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: transparent;
  }

  .shiph1::-webkit-scrollbar-thumb {
    background: #cec1a9;
  }

  .shiph2 {
    font-family: 'Alegreya SC', Times New Roman, serif;
    font-size: 16px;
    font-weight: 700;
  }

  /* Картинка */
  .character-image {
    width: 500px;
    height: 200px;
    background-image: url('https://via.placeholder.com/500x200'); /* Замените ссылку на нужное изображение */
    background-size: cover;
    background-position: 50% 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
</style>

<div id="ship3">
  <div class="shipro">
    <h5>Название эпизода</h5>
    <div class="character-image"></div>
    <div class="shiph1"><!-- БЛОК ТЕКСТА -->
      <span class="shiph2">Место событий и время:</span>...<br>
      <span class="shiph2">Действующие лица:</span>...<br><br>

      Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпиз

[/html]

Код:
<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  #ship3 {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto auto 2em;
    padding: 20px 0;
    background: url(https://forumupload.ru/uploads/001c/0c/35/2/154988.png) calc(100% + 130px) 50% no-repeat #c8c4b7;
    width: 650px;
    height: 400px;
  }

  .shipro {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 130%;
    color: #000;
    font-size: 11px;
    padding: 0 20px 0 10px;
  }

  .shipro > h5 {
    display: block;
    padding-bottom: 14px;
    margin-bottom: 14px;
    font-weight: 400;
    font-family: 'Alegreya SC', Times New Roman, serif;
    font-size: 22px;
    border-bottom: 1px dotted #c0aa8c;
  }

  .shiph1 {
    display: block;
    overflow: auto;
    padding-right: 4px;
    max-height: 100px;
  }

  .shiph1::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: transparent;
  }

  .shiph1::-webkit-scrollbar-thumb {
    background: #cec1a9;
  }

  .shiph2 {
    font-family: 'Alegreya SC', Times New Roman, serif;
    font-size: 16px;
    font-weight: 700;
  }

  /* Картинка */
  .character-image {
    width: 500px;
    height: 200px;
    background-image: url('https://via.placeholder.com/500x200'); /* Замените ссылку на нужное изображение, маштабируется сама */
    background-size: cover;
    background-position: 50% 50%; /* МЕНЯЙТЕ ПРОЦЕНТЫ ЧТОБЫ СДВИНУТЬ ССЫЛКУ ВВЕРХ ИЛИ ВНИЗ */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
</style>

<div id="ship3">
  <div class="shipro">
    <h5>Название эпизода</h5>
    <div class="character-image"></div>
    <div class="shiph1"><!-- БЛОК ТЕКСТА -->
      <span class="shiph2">Место событий и время:</span>...<br>
      <span class="shiph2">Действующие лица:</span>...<br><br>

      Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпизода. Описание эпиз

[/html]