А что, если…?

[html]
<style>
.modern-text {
font-size: 17px;
line-height: 1.8;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 25px;
position: relative;
}
.modern-text::before {
content: '';
position: absolute;
top: 0;
left: 25%;
width: 50%;
height: 2px;
background: linear-gradient(90deg, transparent, #03bfa4, transparent);
}
.modern-text::after {
content: '';
position: absolute;
bottom: 0;
left: 25%;
width: 50%;
height: 2px;
background: linear-gradient(90deg, transparent, #03bfa4, transparent);
}
</style>

<div class="modern-text">
Хотите обыграть забавную ситуацию, драматичный момент или просто пофантазировать о приключениях своего персонажа? Теперь это легко сделать в формате весёлого комикса!<br>
Для игроков – создайте комикс о вашем персонаже, раскрыв его характер и историю через визуальный рассказ.
<br>
Для гостей – если у вас пока нет своего героя, это идеальный момент, чтобы его придумать! Дайте волю фантазии и воплотите уникальный образ в виде комикса.<br>
За участие мы выдадим купон на любой бонус из нашего банка. Потратить его можно будет как сразу, так и отложить на потом
</div>
[/html]

[html]
<style>
body {
font-family: 'Comic Sans MS', cursive;
background-color: #f9f9f9;
margin: 0;
padding: 10px;
display: flex;
justify-content: center;
}

.comic-container {
max-width: 600px;
background-image: url(https://i.pinimg.com/736x/49/62/5c/4962 … f07c9a.jpg);
padding: 15px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.comic-title {
text-align: center;
color: white;
margin: 0 0 15px 0;
font-size: 1.8em;
text-transform: uppercase;
}

.panels {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.panel {
border: 3px solid black;
position: relative;
height: 180px;
overflow: hidden;
border-radius: 5px;
}

.panel-wide {
grid-column: span 2;
height: 150px;
}

.panel img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Адаптивные текстовые блоки */
.speech {
position: absolute;
background: white;
border: 2px solid black;
border-radius: 15px;
padding: 8px 12px;
font-size: 14px;
max-width: 70%;
min-width: 50px;
word-wrap: break-word;
box-sizing: border-box;
}

.speech:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: white;
border: 2px solid black;
border-top: none;
border-right: none;
bottom: -10px;
left: 20px;
transform: rotate(-45deg);
}

.thought {
position: absolute;
background: white;
border: 2px solid black;
border-radius: 50px;
padding: 8px 12px;
font-size: 14px;
max-width: 70%;
min-width: 50px;
word-wrap: break-word;
box-sizing: border-box;
}

.thought:before {
content: '○○○';
position: absolute;
font-size: 8px;
bottom: -12px;
left: 8px;
letter-spacing: 2px;
}

.caption {
position: absolute;
bottom: 5px;
width: 90%;
left: 5%;
background: white;
border: 2px solid black;
padding: 8px;
font-size: 12px;
text-align: center;
font-style: italic;
box-sizing: border-box;
word-wrap: break-word;
}

/* Адаптация для мобильных */
@media (max-width: 480px) {
.panels {
grid-template-columns: 1fr;
}

.panel-wide {
grid-column: span 1;
}

.panel, .panel-wide {
height: 200px;
}

.speech, .thought {
font-size: 12px;
padding: 6px 10px;
}
}
</style>
</head>
<body>
<div class="comic-container">
<h1 class="comic-title">НАЗВАНИЕ КОМИКСА</h1>

<div class="panels">

<div class="panel">
<img src="https://stihi.ru/pics/2019/08/10/6528.jpg" alt="Кот просыпается">
<div class="speech" style="top: 15px; left: 15px;">текст</div>
</div>


<div class="panel">
<img src="https://stihi.ru/pics/2019/08/10/6528.jpg" alt="Кот ест">
<div class="thought" style="top: 20px; right: 15px;">текст</div>
</div>


<div class="panel panel-wide">
<img src="https://stihi.ru/pics/2019/08/10/6528.jpg" alt="Кот играет">
<div class="speech" style="top: 20px; left: 30px;">текст</div>
<div class="caption">текст</div>
</div>


<div class="panel">
<img src="https://stihi.ru/pics/2019/08/10/6528.jpg" alt="Кот спит">
<div class="thought" style="top: 15px; left: 15px;">текст</div>
</div>


<div class="panel">
<img src="https://stihi.ru/pics/2019/08/10/6528.jpg" alt="Кот удивлён">
<div class="speech" style="top: 30px; right: 15px;">текст</div>
</div>


<div class="panel panel-wide">
<img src="https://stihi.ru/pics/2019/08/10/6528.jpg" alt="Кот доволен">
<div class="caption">текст</div>
</div>
</div>
</div>
</body>
</html>
[/html]

Код:

[html]
    <style>
        body {
            font-family: 'Comic Sans MS', cursive;
            background-color: #f9f9f9;
            margin: 0;
            padding: 10px;
            display: flex;
            justify-content: center;
        }
        
        .comic-container {
            max-width: 600px;
            background-image: url(https://i.pinimg.com/736x/49/62/5c/49625c4c300b4fd27faa6e2304f07c9a.jpg);
            padding: 15px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        
        .comic-title {
            text-align: center;
            color: white;
            margin: 0 0 15px 0;
            font-size: 1.8em;
            text-transform: uppercase;
        }
        
        .panels {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .panel {
            border: 3px solid black;
            position: relative;
            height: 180px;
            overflow: hidden;
border-radius: 5px;
        }
        
        .panel-wide {
            grid-column: span 2;
            height: 150px;
        }
        
        .panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* Адаптивные текстовые блоки */
        .speech {
            position: absolute;
            background: white;
            border: 2px solid black;
            border-radius: 15px;
            padding: 8px 12px;
            font-size: 12px;
            max-width: 70%;
            min-width: 50px;
            word-wrap: break-word;
            box-sizing: border-box;
        }
        
        .speech:after {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            background: white;
            border: 2px solid black;
            border-top: none;
            border-right: none;
            bottom: -10px;
            left: 20px;
            transform: rotate(-45deg);
        }
        
        .thought {
            position: absolute;
            background: white;
            border: 2px solid black;
            border-radius: 50px;
            padding: 8px 12px;
            font-size: 12px;
            max-width: 70%;
            min-width: 50px;
            word-wrap: break-word;
            box-sizing: border-box;
        }
        
        .thought:before {
            content: '○○○';
            position: absolute;
            font-size: 8px;
            bottom: -12px;
            left: 8px;
            letter-spacing: 2px;
        }
        
        .caption {
            position: absolute;
            bottom: 5px;
            width: 90%;
            left: 5%;
            background: white;
            border: 2px solid black;
            padding: 8px;
            font-size: 11px;
            text-align: center;
            font-style: italic;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        
        /* Адаптация для мобильных */
        @media (max-width: 480px) {
            .panels {
                grid-template-columns: 1fr;
            }
            
            .panel-wide {
                grid-column: span 1;
            }
            
            .panel, .panel-wide {
                height: 200px;
            }
            
            .speech, .thought {
                font-size: 12px;
                padding: 6px 10px;
            }
        }
    </style>
</head>
<body>
    <div class="comic-container">
        <h1 class="comic-title">НАЗВАНИЕ КОМИКСА</h1>
        
        <div class="panels">
            <!-- Панель 1 -->
            <div class="panel">
                <img src="ССЫЛКА НА КАРТИНКУ 1">
                <div class="speech" style="top: 15px; left: 15px;">текст к картинке</div>
            </div>
            
            <!-- Панель 2 -->
            <div class="panel">
                <img src="ССЫЛКА НА КАРТИНКУ2" >
                <div class="thought" style="top: 20px; right: 15px;">текст к картинке</div>
            </div>
            
            <!-- Панель 3  -->
            <div class="panel panel-wide">
                <img src="ССЫЛКА НА КАРТИНКУ3" >
                <div class="speech" style="top: 20px; left: 30px;">текст к картинке</div>
                <div class="caption">текст к картинке</div>
            </div>
            
            <!-- Панель 4 -->
            <div class="panel">
                <img src="ССЫЛКА НА КАРТИНКУ4" >
                <div class="thought" style="top: 15px; left: 15px;">текст к картинке</div>
            </div>
            
            <!-- Панель 5 -->
            <div class="panel">
                <img src="ССЫЛКА НА КАРТИНКУ5">
                <div class="speech" style="top: 30px; right: 15px;">текст к картинке</div>
            </div>
            
            <!-- Панель 6  -->
            <div class="panel panel-wide">
                <img src="ССЫЛКА НА КАРТИНКУ6" >
                <div class="caption">текст к картинке</div>
            </div>
        </div>
    </div>
</body>
</html>
[/html]