/* Новость (5.1 Новость 2005-1472, мобильная 2005-3248).
   Карточки «Другие новости» и чипы — из news.css. Колонка текста 580 по центру страницы, фото 896 по центру. */

.art { --col: 580px; --col-x: calc(50% - var(--col) / 2); }

/* хлебные крошки */
.crumbs { display: flex; align-items: center; gap: 16px; padding: 27px var(--gutter) 0; font: 500 11px/20px var(--f-text); letter-spacing: .01em; text-transform: uppercase; }
.crumbs a { transition: color .25s; }
.crumbs .i { width: 10px; height: 10px; }
@media (hover: hover) { .crumbs a:hover { color: var(--c-white-50); } }

/* шапка новости: дата у поля, заголовок с колонки текста */
.art__head { position: relative; padding: 49px var(--gutter) 64px var(--col-x); border-bottom: 1px solid var(--c-line); }
.art__date { position: absolute; left: var(--gutter); top: calc(49px + 14px); font: 600 11px/20px var(--f-text); letter-spacing: .06em; text-transform: uppercase; }
.art__title { max-width: 886px; font: 400 40px/48px var(--f-head); }
.art__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }

/* текст */
.art__body { width: var(--col); max-width: calc(100% - 2 * var(--gutter)); margin: 58px auto 0; font: 400 14px/22px var(--f-text); color: var(--c-white-80); }
.art__body p + p { margin-top: 22px; }
.art__fig { position: relative; overflow: hidden; width: 896px; max-width: calc(100% - 2 * var(--gutter)); margin: 58px auto 0; aspect-ratio: 896 / 597; background: #d9d9d9; }
.art__fig img { position: absolute; max-width: none; }

/* другие новости */
.more__pre { display: flex; margin: 140px var(--gutter) 42px; }
.more__foot { display: flex; justify-content: center; margin-top: 48px; padding-inline: var(--gutter); }
.more__btn { gap: 12px; }

@media (max-width: 1023px) {
  .crumbs { padding-top: 27px; }
  .art__head { padding: 53px var(--gutter) 48px; }
  .art__date { position: static; display: block; }
  .art__title { margin-top: 18px; font-size: 20px; line-height: 30px; }
  .art__tags { margin-top: 48px; }
  .art__body { width: auto; max-width: none; margin: 42px var(--gutter) 0; }
  .art__body + .art__fig + .art__body { margin-top: 58px; }
  .art__fig { width: 100%; max-width: none; aspect-ratio: 375 / 250; }
  .more__pre { margin: 76px var(--gutter) 42px; }
  .more__foot { margin-top: 64px; padding-bottom: 120px; }
  .more__btn { width: 100%; height: 56px; justify-content: space-between; padding-inline: 24px; }
}