diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css
index 5e12633..dea0285 100644
--- a/wp-content/themes/hantico/assets/css/style.css
+++ b/wp-content/themes/hantico/assets/css/style.css
@@ -5943,4 +5943,163 @@ h4 {
   .specs-tabs__item:hover {
     color: var(--color-red);
   }
-}
\ No newline at end of file
+}
+
+/* новые */
+
+.h-article-hero {
+    --h-hero-accent: #d52d49;
+    --h-hero-text: #202b35;
+    --h-hero-muted: #68747f;
+    --h-hero-line: #e7eaf0;
+    --h-hero-bg: #f7f8fa;
+    --h-hero-radius: 26px;
+
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 1100px;
+    color: var(--h-hero-text);
+    font-family: inherit;
+}
+
+.h-article-hero *,
+.h-article-hero *::before,
+.h-article-hero *::after {
+    box-sizing: border-box;
+}
+
+.h-article-hero__container {
+    display: grid;
+    grid-template-columns: minmax(400px, 500px) minmax(0, 1fr);
+    align-items: stretch;
+    gap: 64px;
+    width: calc(100% - 80px);
+    max-width: 1360px;
+}
+
+.h-article-hero__picture {
+    min-height: 600px;
+    overflow: hidden;
+    border-radius: var(--h-hero-radius);
+    background: #e4e8ec;
+}
+
+.h-article-hero__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 600px;
+    object-fit: cover;
+    object-position: center;
+}
+
+.h-article-hero__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    padding: 5px 0 4px;
+}
+
+.h-article-hero__breadcrumb-divider {
+    flex: none;
+    color: #a9b0b8;
+}
+
+.h-article-hero__breadcrumb-current {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--h-hero-text);
+}
+
+.h-article-hero__categories {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 19px;
+}
+
+.h-article-hero__category {
+    display: inline-flex;
+    align-items: center;
+    min-height: 29px;
+    padding: 5px 12px;
+    border: 1px solid rgba(213, 45, 73, .17);
+    border-radius: 100px;
+    background: #fff0f3;
+    color: var(--h-hero-accent);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.h-article-hero__title {
+    width: 100%;
+    margin: 0;
+    color: var(--h-hero-text);
+    font-size: 44px;
+    font-weight: 700;
+    line-height: 1.12;
+    letter-spacing: -.035em;
+    text-wrap: balance;
+}
+
+.h-article-hero__title > span {
+    background: linear-gradient(98deg, #f05d6b 0%, #bc203f 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.h-article-hero__description {
+    max-width: 710px;
+    margin: 24px 0 34px;
+    color: #535f6c;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 1.6;
+}
+
+.h-article-hero__meta {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
+    margin-top: auto;
+    padding-top: 25px;
+    border-top: 1px solid var(--h-hero-line);
+    color: #4e5a65;
+}
+
+.h-article-hero__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    flex: none;
+    min-height: 31px;
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 1.35;
+    white-space: nowrap;
+}
+
+.h-article-hero__meta-item:first-child {
+    padding-left: 0;
+}
+
+.h-article-hero__meta-item + .h-article-hero__meta-item {
+    border-left: 1px solid #d7dce3;
+}
+
+.h-article-hero__meta-item svg {
+    display: block;
+    flex: none;
+    width: 22px;
+    height: 22px;
+    color: var(--h-hero-accent);
+}
+
+.h-article-hero__meta-item strong {
+    color: var(--h-hero-text);
+    font-weight: 600;
+}
diff --git a/wp-content/themes/hantico/single-article.php b/wp-content/themes/hantico/single-article.php
index 877ca3b..3a64421 100644
--- a/wp-content/themes/hantico/single-article.php
+++ b/wp-content/themes/hantico/single-article.php
@@ -6,6 +6,7 @@
 
 		<?php
 			$parent_id = is_singular('news') ? 82 : 42;
+			$terms = get_the_terms(get_the_ID(), 'article_category');
 			$article_content = get_field('article_content');
 			if ($article_content) :
 			$generated = generate_toc($article_content);
@@ -17,23 +18,60 @@
 					<div class="article-goback">
 						<a href="<?php echo get_permalink($parent_id); ?>" class="article-goback__btn">Назад</a>
 					</div>
-					<div class="article-header">
-						<h1 class="article-title"><?php the_title(); ?></h1>
-						<div class="article-img"><?php the_post_thumbnail('extra_large'); ?></div>
-						<div class="article-meta">
-							<time class="article-date" datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('d.m.Y'); ?></time>
-							<?php
-								$terms = get_the_terms(get_the_ID(), 'article_category');
-								if ($terms) :
-							?>
-								<ul class="article-tags">
-									<?php foreach ($terms as $term) : ?>
-										<li class="article-tags__item"><?php echo $term->name; ?></li>
-									<?php endforeach; ?>
-								</ul>
-							<?php endif; ?>
+
+					<div class="h-article-hero" aria-labelledby="h-article-hero-title">
+						<div class="h-article-hero__container">
+							<div class="h-article-hero__picture">
+								<?php the_post_thumbnail('extra_large', array('class' => 'h-article-hero__image')); ?>
+							</div>
+
+							<div class="h-article-hero__content">
+								<?php if ($terms && !is_wp_error($terms)) : ?>
+									<div class="h-article-hero__categories">
+										<?php foreach ($terms as $term) : ?>
+											<span class="h-article-hero__category"><?php echo esc_html($term->name); ?></span>
+										<?php endforeach; ?>
+									</div>
+								<?php endif; ?>
+
+								<h1 class="h-article-hero__title" id="h-article-hero-title">
+									<?php the_title(); ?>
+								</h1>
+
+								<?php $brief_description = get_field('brief_description'); ?>
+								<?php if ($brief_description) : ?>
+									<p class="h-article-hero__description"><?php echo nl2br(esc_html($brief_description)); ?></p>
+								<?php endif; ?>
+
+								<div class="h-article-hero__meta" aria-label="Информация о статье">
+									<div class="h-article-hero__meta-item">
+										<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+											<rect x="3" y="5" width="18" height="16" rx="2"></rect>
+											<path d="M7 3v4M17 3v4M3 10h18"></path>
+										</svg>
+										<time datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo esc_html(get_the_date('d.m.Y')); ?></time>
+									</div>
+
+									<div class="h-article-hero__meta-item">
+										<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+											<circle cx="12" cy="13" r="9"></circle>
+											<path d="M12 8v5l3 2M9 2h6"></path>
+										</svg>
+										<span>Время чтения: <strong>—</strong></span>
+									</div>
+
+									<div class="h-article-hero__meta-item">
+										<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+											<path d="M2.2 12s3.7-6 9.8-6 9.8 6 9.8 6-3.7 6-9.8 6-9.8-6-9.8-6Z"></path>
+											<circle cx="12" cy="12" r="2.8"></circle>
+										</svg>
+										<span>Просмотры: <strong>—</strong></span>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
+
 					<div class="article-body<?php if (!$toc_items) echo ' no-toc'; ?>">
 						<div class="article-main">
 							<div class="article-content content"><?php echo wrap_tables($content); ?></div>