<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Статья</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, serif; line-height: 1.65; color: #222; }
.layout {
display: grid;
gap: 2rem;
max-width: 56rem;
margin: 0 auto;
padding: 1.5rem 1.25rem;
}
@media (min-width: 48rem) {
.layout { grid-template-columns: minmax(0, 1fr) 12rem; }
}
article { max-width: 65ch; }
article h1 { font-family: system-ui, sans-serif; line-height: 1.2; }
aside {
font-family: system-ui, sans-serif;
font-size: 0.9rem;
color: #555;
border-top: 3px solid #4361ee;
padding-top: 0.75rem;
}
</style>
</head>
<body>
<div class="layout">
<article>
<h1>Заголовок материала</h1>
<p>Основной текст. На десктопе сайдбар справа, на телефоне — под статьёй.</p>
</article>
<aside>
<p><strong>Автор</strong><br />И. Иванов</p>
<p><strong>Обновлено</strong><br />31 мая 2026</p>
</aside>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Статья</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, serif; line-height: 1.65; color: #222; }
.layout {
display: grid;
gap: 2rem;
max-width: 56rem;
margin: 0 auto;
padding: 1.5rem 1.25rem;
}
@media (min-width: 48rem) {
.layout { grid-template-columns: minmax(0, 1fr) 12rem; }
}
article { max-width: 65ch; }
article h1 { font-family: system-ui, sans-serif; line-height: 1.2; }
aside {
font-family: system-ui, sans-serif;
font-size: 0.9rem;
color: #555;
border-top: 3px solid #4361ee;
padding-top: 0.75rem;
}
</style>
</head>
<body>
<div class="layout">
<article>
<h1>Заголовок материала</h1>
<p>Основной текст. На десктопе сайдбар справа, на телефоне — под статьёй.</p>
</article>
<aside>
<p><strong>Автор</strong><br />И. Иванов</p>
<p><strong>Обновлено</strong><br />31 мая 2026</p>
</aside>
</div>
</body>
</html>