/* YS Text / YS Display — подключены с yastatic, как на yandex.ru/company */
@font-face{
  font-family:YS Text;
  font-weight:300;
  font-style:normal;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/V3PCI5t9wLQulFhlxmM-nRrX-LM.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/k6JccBlR5c7Kq8MWbMSi_5IhJFM.woff) format("woff")
}
@font-face{
  font-family:YS Text;
  font-weight:300;
  font-style:italic;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/Z7ZUyW-3Gr8a1WoaF2X70JPnHqQ.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/yAhaw8H_7JPnro_s-q2xJXuaDnU.woff) format("woff")
}
@font-face{
  font-family:YS Text;
  font-weight:400;
  font-style:normal;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/KK0rDEa2iWz8WgDULp1jAS8q14w.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/Sc6Z_UiRWPbsutyXbwxwb1SMNjw.woff) format("woff")
}
@font-face{
  font-family:YS Text;
  font-weight:400;
  font-style:italic;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/pMpSprJxnRUXXmusaDVZWOsU20E.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/hyO9p155BRxX0R1FtmPbWdrK_PI.woff) format("woff")
}
@font-face{
  font-family:YS Text;
  font-weight:500;
  font-style:normal;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/V2te_I_TgULQTmO70ObZxmmFZuY.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/AtbYV1Dr4EXQOMlXaYUzWXjYx9Q.woff) format("woff")
}
@font-face{
  font-family:YS Text;
  font-weight:500;
  font-style:italic;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/RcEzPhj_CVNS4DRd6JPyrDrRbF8.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/CZN01D0zg0z8oE7BSb_lU-_4DNY.woff) format("woff")
}
@font-face{
  font-family:YS Text;
  font-weight:700;
  font-style:normal;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/tsAJTBiroZH9oATHPwoKjId2x_M.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/exohXbCYwlBRtAvWCYTO8wOnx4w.woff) format("woff")
}
@font-face{
  font-family:YS Text;
  font-weight:700;
  font-style:italic;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/yastatic/islands/_/WJlUcWAljaUArZ7ErQjGCMps1dg.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/yastatic/islands/_/KJwBOYY0De22nZEJjWLOtRSj1xg.woff) format("woff")
}
@font-face{
  font-family:YS Display;
  font-weight:300;
  font-style:normal;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/s3/home/fonts/ys/1/display-light.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/s3/home/fonts/ys/1/display-light.woff) format("woff")
}
@font-face{
  font-family:YS Display;
  font-weight:400;
  font-style:normal;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/s3/home/fonts/ys/1/display-regular.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/s3/home/fonts/ys/1/display-regular.woff) format("woff")
}
@font-face{
  font-family:YS Display;
  font-weight:500;
  font-style:normal;
  font-display:fallback;
  src:url(https://yastatic.net/s3/company-ir/s3/home/fonts/ys/1/display-medium.woff2) format("woff2"),url(https://yastatic.net/s3/company-ir/s3/home/fonts/ys/1/display-medium.woff) format("woff")
}

/* Цвета yandex.ru/company */
:root {
  --color-text: #050505;
  --color-text-secondary: rgba(5, 5, 5, .7);
  --color-text-tertiary: rgba(5, 5, 5, .5);
  --color-text-disabled: rgba(5, 5, 5, .2);
  --color-text-inverse: #fff;
  --color-text-inverse-secondary: hsla(0, 0%, 100%, .5);

  --color-bg: #fff;
  --color-bg-mauve: #eef1f7;
  --color-surface: var(--color-bg-mauve);
  --color-bg-dark: #050505;
  --color-bg-dark-addon: #171717;
  --color-bg-control: rgba(213, 221, 236, .4);

  --color-line: #d7deed;
}

/*
  Переменные лейаута yandex.ru/company (имена сохранены как у них).
  Брейкпоинты: ≤767 / 768–1022.9 / 1023–1278.9 / 1279–1439 / 1440–1919 / ≥1920
*/
:root {
  --header-height: 68px;
  --header-item-border-radius: 8px;
  --header-item-backdrop-filter: blur(24px);
  --opacity-hover: .5;
  --rounded-element-border-radius: 24px;
  --text-element-inner-gap-vertical: 40px;
  --icon-inline-size-s: 16px;

  --layout-max-width: 1848px;
  --layout-padding-horizontal: 36px;
  --layout-border-radius: 48px;
  --section-max-width: 1368px;
  --text-element-gap: 48px;

  --section-first-child-gap-top: 80px;
  --section-gap-top: 56px;
  --section-gap-bottom: 80px;
  --section-breadcrumb-padding: 40px;
  --page-content-gap: 48px;
  --slider-selections-plate-gap: 80px;

  --footer-main-min-height: 384px;
  --footer-main-padding: 24px;
  --footer-addon-padding: 56px;
  --footer-addon-item-margin-top: 16px;

  /* наше: ширины колонок лонгрида */
  --longread-text-width: 790px;
  --longread-wide-width: 1296px;
}

@media screen and (min-width: 768px) and (max-width: 1278.9px) {
  :root {
    --layout-max-width: auto;
    --layout-padding-horizontal: 32px;
    --layout-border-radius: 40px;
    --section-max-width: auto;
    --text-element-gap: 40px;
    --footer-main-min-height: 405px;
    --footer-addon-padding: 48px;
    --footer-addon-item-margin-top: 8px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --layout-max-width: auto;
    --layout-padding-horizontal: 12px;
    --layout-border-radius: 24px;
    --section-max-width: auto;
    --section-first-child-gap-top: 48px;
    --section-gap-top: 32px;
    --section-gap-bottom: 64px;
    --section-breadcrumb-padding: 32px;
    --page-content-gap: 40px;
    --slider-selections-plate-gap: 64px;
    --text-element-gap: 32px;
    --text-element-inner-gap-vertical: 24px;
    --rounded-element-border-radius: 20px;
    --footer-main-min-height: 360px;
    --footer-main-padding: 32px;
    --footer-addon-padding: 40px;
    --footer-addon-item-margin-top: 8px;
  }
}

/* Типографская шкала yandex.ru/company (имена сохранены как у них) */
:root {
  --font-text: "YS Text", arial, sans-serif;
  --font-display: "YS Display", arial, sans-serif;

  /* наше: базовый кегль = 1rem */
  --root-font-size: 23px;

  /* наше: XL для обложек, YS Display 500 */
  --h1-xl-font-size: 128px; --h1-xl-line-height: 120px;

  --h1-hero-font-size: 71px; --h1-hero-line-height: 72px;
  --h1-font-size: 56px; --h1-line-height: 60px;
  --h2-font-size: 44px; --h2-line-height: 48px;
  --h3-font-size: 36px; --h3-line-height: 40px;
  --h4-font-size: 29px; --h4-line-height: 32px;
  --h5-font-size: 25px; --h5-line-height: 28px;
  --h6-font-size: 21px; --h6-line-height: 24px;

  --text_primary-size: 21px; --text_primary-line-height: 28px;
  --text_secondary-size: 17px; --text_secondary-line-height: 24px;
  --text_caption-size: 15px; --text_caption-line-height: 20px;
  --text_important-size: 64px; --text_important-line-height: 64px;
}

@media screen and (min-width: 1920px) {
  :root {
    --h1-xl-font-size: 168px; --h1-xl-line-height: 156px;
    --h1-hero-font-size: 94px; --h1-hero-line-height: 96px;
  }
}

@media screen and (min-width: 1279px) and (max-width: 1439px) {
  :root {
    --h1-xl-font-size: 112px; --h1-xl-line-height: 104px;
    --h1-hero-font-size: 63px; --h1-hero-line-height: 64px;
    --h1-font-size: 50px; --h1-line-height: 52px;
    --h2-font-size: 38px; --h2-line-height: 44px;
    --h3-font-size: 32px; --h3-line-height: 36px;
    --h4-font-size: 26px; --h4-line-height: 28px;
    --h5-font-size: 22px; --h5-line-height: 24px;
    --h6-font-size: 18px; --h6-line-height: 22px;
  }
}

@media screen and (min-width: 1023px) and (max-width: 1278.9px) {
  :root {
    --root-font-size: 19px;
    --h1-xl-font-size: 88px; --h1-xl-line-height: 84px;
    --h1-hero-font-size: 50px; --h1-hero-line-height: 52px;
    --h1-font-size: 40px; --h1-line-height: 44px;
    --h2-font-size: 31px; --h2-line-height: 34px;
    --h3-font-size: 26px; --h3-line-height: 28px;
    --h4-font-size: 21px; --h4-line-height: 24px;
    --h5-font-size: 17px; --h5-line-height: 20px;
    --text_primary-size: 17px; --text_primary-line-height: 24px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1022.9px) {
  :root {
    --h1-xl-font-size: 96px; --h1-xl-line-height: 92px;
    --h1-hero-font-size: 67px; --h1-hero-line-height: 68px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --root-font-size: 18px;
    --h1-xl-font-size: 52px; --h1-xl-line-height: 52px;
    --h1-hero-font-size: 36px; --h1-hero-line-height: 36px;
    --h1-font-size: 36px; --h1-line-height: 36px;
    --h2-font-size: 30px; --h2-line-height: 32px;
    --h3-font-size: 27px; --h3-line-height: 28px;
    --h4-font-size: 23px; --h4-line-height: 24px;
    --h5-font-size: 19px; --h5-line-height: 20px;
    --text_primary-size: 17px; --text_primary-line-height: 24px;
    --text_secondary-size: 15px; --text_secondary-line-height: 20px;
    --text_important-size: 52px; --text_important-line-height: 52px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 1rem = наш основной кегль, чуть крупнее их --text_primary-size */
html {
  height: 100%;
  font-size: var(--root-font-size);
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.icon-inline {
  display: inline-block;
}

.icon-inline svg {
  display: block;
}

.icon-inline_size_s {
  width: var(--icon-inline-size-s);
  height: var(--icon-inline-size-s);
}

/* Скругление-сквиркл, как .m__rounded в modulate-design-system */
.rounded {
  --rounded-radius: 2rem;

  border-radius: var(--rounded-radius);
  corner-shape: squircle;
  overflow: hidden;
}

@supports not (corner-shape: squircle) {
  .rounded {
    border-radius: 0;
    border-radius: initial;
    mask:
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,1 c0,-1 0,-1 1,-1 l99,0 l0,100 l-100,0 Z"/></svg>')
        top left / calc(var(--rounded-radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l99,0 c1,0 1,0 1,1 l0,99 l-100,0 l0,-100 Z"/></svg>')
        top right / calc(var(--rounded-radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>')
        bottom right / calc(var(--rounded-radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>')
        bottom left / calc(var(--rounded-radius) * 100) no-repeat intersect;
  }
}

/*
  Сетка промоблоков историй: 5 колонок на десктопе, 3 на мобильном.
  Двойная ширина задаётся отдельно для каждой сетки:
  .stories__item_wide_desktop, .stories__item_wide_mobile
*/

.stories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .3rem;
}

.stories__item {
  position: relative;
  display: block;
  height: 10rem;
  padding: 1rem 1.1rem;
  color: var(--color-text);
  background: var(--color-surface);
}

.stories__item_wide_desktop {
  grid-column: span 2;
}

.stories__title {
  position: relative;
  z-index: 1;
  max-width: 11em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.15;
}

.stories__image {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  transition: transform .4s cubic-bezier(.2, 1, .2, 1);
}

.stories__image_kind_logo {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.stories__image_kind_wordmark {
  width: 60%;
  height: 1.8rem;
  object-fit: contain;
  object-position: right bottom;
}

.stories__image_kind_photo,
.stories__image_kind_ui {
  width: 6.5rem;
  height: 4.6rem;
  border-radius: .8rem;
  object-fit: cover;
}

.stories__image_kind_ui {
  object-position: top;
}

@media (hover: hover) {
  .stories__item:hover .stories__image {
    transform: scale(1.12) rotate(-4deg);
  }
}

@media screen and (max-width: 767px) {
  .stories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stories__item {
    padding: .7rem .75rem;
  }

  .stories__item_wide_desktop {
    grid-column: auto;
  }

  .stories__item_wide_mobile {
    grid-column: span 2;
  }

  .stories__title {
    font-size: .82rem;
  }

  .stories__image {
    right: .55rem;
    bottom: .55rem;
  }

  .stories__image_kind_logo {
    width: 3rem;
    height: 3rem;
  }

  .stories__image_kind_wordmark {
    width: 70%;
    height: 1.3rem;
  }

  .stories__image_kind_photo,
  .stories__image_kind_ui {
    width: 4.6rem;
    height: 3.4rem;
    border-radius: .6rem;
  }
}

.logo {
  position: relative;
}

.logo__link {
  display: inline-block;
}

.logo__image-full {
  pointer-events: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
}

.logo_tld_ru .logo__image-full {
  width: 117px;
  height: 34px;
}

.logo_tld_ru.logo_theme_black .logo__image-full {
  background-image: url(https://yastatic.net/s3/company-ir/s3/company-static/static/_/bee2b58e383f029658e10d854164aa05.svg);
}

.logo_tld_ru.logo_theme_white .logo__image-full {
  background-image: url(https://yastatic.net/s3/company-ir/s3/company-static/static/_/46b42a6ee9577227ee234b8a56f44281.svg);
}

@media screen and (max-width: 767px) {
  .logo_tld_ru .logo__image-full {
    width: 96px;
    height: 28px;
  }
}

.menu-services__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.menu-services__item {
  margin: 0;
  list-style: none;
}

.menu-services__item:not(:last-child) {
  margin-right: 28px;
}

.menu-services__link {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  color: var(--color-text);
}

.menu-services_theme_white .menu-services__link {
  color: var(--color-text-inverse);
}

.menu-services_location_header .menu-services__item {
  margin-right: 4px;
}

.menu-services_location_header .menu-services__link {
  display: block;
  padding: 8px 12px;
  border-radius: var(--header-item-border-radius);
  background-color: var(--color-bg-control);
  -webkit-backdrop-filter: var(--header-item-backdrop-filter);
  backdrop-filter: var(--header-item-backdrop-filter);
}

@media (hover: hover) {
  .menu-services__link:hover {
    opacity: var(--opacity-hover);
  }
}

@media screen and (max-width: 1278.9px) {
  .menu-services_location_footer .menu-services__item {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1278.9px) {
  .menu-services__list {
    flex-direction: column;
  }

  .menu-services_location_header .menu-services__list {
    flex-direction: row;
  }

  .menu-services_location_header .menu-services__link {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .menu-services__list {
    flex-direction: column;
  }

  .menu-services__item {
    margin: 0;
  }
}

.header {
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  margin: 0;
  padding: 20px var(--layout-padding-horizontal) 8px;
  pointer-events: none;
}

.header__content {
  display: flex;
  align-items: center;
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.header__menu {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.header__services {
  display: flex;
  pointer-events: auto;
}

.header__controls {
  display: flex;
  margin: 0 0 0 48px;
  pointer-events: auto;
}

.header__search {
  margin: 0 4px 0 0;
}

.header__button-nav,
.header__button-search {
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: var(--header-item-border-radius);
  background-color: var(--color-bg-control);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-backdrop-filter: var(--header-item-backdrop-filter);
  backdrop-filter: var(--header-item-backdrop-filter);
}

.header_theme_black .header__button-search {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.129 12.258a6.129 6.129 0 114.972-2.544l3.812 3.812a.98.98 0 01-1.387 1.387L9.714 11.1a6.1 6.1 0 01-3.585 1.157zm0-1.961a4.168 4.168 0 100-8.336 4.168 4.168 0 000 8.336z' fill='%23050505'/%3E%3C/svg%3E");
}

.header_theme_black .header__button-nav {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0H0v4h4V0zM4 8H0v4h4V8zM8 0h4v4H8V0zM12 8H8v4h4V8z' fill='%23050505'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .header__button-nav:hover,
  .header__button-search:hover {
    opacity: var(--opacity-hover);
  }
}

@media screen and (min-width: 1023px) and (max-width: 1278.9px) {
  .header__controls {
    margin: 0 0 0 40px;
  }
}

@media screen and (max-width: 1022.9px) {
  .header__controls {
    margin: 0;
  }

  .header__services {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .header {
    padding-top: 16px;
  }
}

.breadcrumb__link {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  color: var(--color-text);
}

.breadcrumb__icon {
  display: inline-block;
  margin: 0 4px 0 0;
  vertical-align: middle;
}

.breadcrumb_theme_white .breadcrumb__link {
  color: var(--color-text-inverse);
}

@media (hover: hover) {
  .breadcrumb__link:hover {
    opacity: var(--opacity-hover);
  }
}

.media {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media_location_footer .media__item:not(:last-child) {
  margin-right: 12px;
}

.media-link {
  display: block;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.media-link_location_footer {
  width: 32px;
  height: 24px;
  padding: 4px 8px;
  background-color: hsla(0, 0%, 100%, .5);
  background-size: 16px;
}

@media (hover: hover) {
  .media-link_location_footer:hover {
    background-color: var(--color-text-inverse);
  }
}

.media-link_location_footer.media-link_type_telegram {
  background-image: url(https://yastatic.net/s3/company-ir/s3/company-static/static/_/d419deafb0389ef66c14f90c58d3e81a.svg);
}

.media-link_location_footer.media-link_type_vkontakte {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.62522 12.7358C3.84196 12.7358 1.11369 9.45659 1 4H3.39601C3.47471 8.00499 5.24107 9.70142 6.64018 10.0512V4H8.89635V7.45406C10.278 7.30541 11.7294 5.73142 12.2191 4H14.4752C14.0992 6.13367 12.5252 7.70767 11.4059 8.35475C12.5252 8.87943 14.3179 10.2523 15 12.7358H12.5165C11.9831 11.0743 10.654 9.78887 8.89635 9.61397V12.7358H8.62522Z' fill='%23050505'/%3E%3C/svg%3E");
}

.media-link_location_footer.media-link_type_youtube {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.3765 0.717733C15.0659 0.901263 15.4682 1.48479 15.6518 2.1742C15.9859 3.42362 16 6.00009 16 6.00009C16 6.00009 15.9859 8.57656 15.6518 9.82597C15.4682 10.5154 15.0659 11.0989 14.3765 11.2824C13.1271 11.6166 8 11.6471 8 11.6471C8 11.6471 2.87294 11.6166 1.62353 11.2824C0.934118 11.0989 0.531765 10.5154 0.348235 9.82597C0.0141177 8.57656 0 6.00009 0 6.00009C0 6.00009 0.0141177 3.42362 0.348235 2.1742C0.534118 1.48479 0.934118 0.901263 1.62353 0.717733C2.87294 0.383616 8 0.353027 8 0.353027C8 0.353027 13.1271 0.383616 14.3765 0.717733ZM6.35294 3.64715L10.5882 6.00009L6.35294 8.35303V3.64715Z' fill='%23050505'/%3E%3C/svg%3E");
}

.footer {
  margin-top: calc(var(--slider-selections-plate-gap) * -1);
  padding-top: var(--slider-selections-plate-gap);
  background: var(--color-bg-dark);
}

.footer__main {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: var(--footer-main-min-height);
  padding: var(--footer-main-padding) var(--layout-padding-horizontal);
  color: var(--color-text-inverse);
  background: var(--color-bg-dark);
}

.footer_has-addon .footer__main {
  border-radius: 0 0 var(--layout-border-radius) var(--layout-border-radius);
}

.footer__content {
  display: grid;
  grid-template: 1fr auto auto / 1fr auto auto;
  width: 100%;
  max-width: var(--layout-max-width);
  min-height: calc(var(--footer-main-min-height) - var(--footer-main-padding) * 2);
  margin: 0 auto;
}

.footer__logo {
  grid-column: 1;
  grid-row: 1;
}

.footer__services {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  grid-column: 2 / 4;
  grid-row: 1;
}

.footer__items {
  margin: 0;
  padding: 0;
  list-style: none;
  grid-column: 2;
  grid-row: 3;
}

.footer__copyright {
  grid-column: 1;
  grid-row: 3;
}

.footer__media {
  justify-self: end;
  align-self: center;
  grid-column: 3;
  grid-row: 3;
}

.footer__copyright,
.footer__link,
.footer__copyright-link {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  color: var(--color-text-inverse-secondary);
}

.footer__addon {
  position: relative;
  z-index: 0;
  margin-top: calc(var(--slider-selections-plate-gap) * -1);
  color: var(--color-text-inverse);
}

.footer__addon-inner {
  padding: calc(var(--slider-selections-plate-gap) + var(--footer-addon-padding) - var(--footer-addon-item-margin-top)) var(--layout-padding-horizontal) var(--footer-addon-padding);
  background: var(--color-bg-dark-addon);
}

.footer__addon .footer__items {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.footer__addon .footer__item {
  display: inline-block;
  margin-top: var(--footer-addon-item-margin-top);
}

.footer__addon .footer__item:not(:last-child) {
  margin-right: 24px;
}

.footer__addon .footer__link {
  font-size: var(--text_secondary-size);
  line-height: var(--text_secondary-line-height);
}

@media (hover: hover) {
  .footer__link:hover,
  .footer__copyright-link:hover {
    color: var(--color-text-inverse);
  }
}

@media screen and (min-width: 1279px) {
  .footer__items {
    margin-right: 48px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1278.9px) {
  .footer__services {
    justify-content: flex-start;
  }

  .footer__items {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 4px;
  }

  .footer__media {
    justify-self: start;
    grid-column: 2 / 4;
  }
}

@media screen and (max-width: 767px) {
  .footer__content {
    grid-template: auto auto minmax(60px, 1fr) auto auto auto / 1fr;
  }

  .footer__media {
    justify-self: start;
    grid-column: 1;
    grid-row: 4;
    margin-bottom: 24px;
  }

  .footer__logo {
    margin-bottom: 24px;
  }

  .footer__services {
    justify-content: flex-start;
    grid-column: 1;
    grid-row: 2;
  }

  .footer__items {
    grid-column: 1;
    grid-row: 5;
    margin-bottom: 8px;
  }

  .footer__copyright {
    grid-column: 1;
    grid-row: 6;
  }

  .footer__addon .footer__item {
    display: block;
  }
}

/* Каркас страницы: app → app__content → main.page → page__section */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  border-bottom-right-radius: var(--layout-border-radius);
  border-bottom-left-radius: var(--layout-border-radius);
}

.app__content_margin {
  margin: var(--header-height) 0 0;
}

.page__section {
  position: relative;
}

.page__section_theme_white {
  background-color: var(--color-bg);
}

.page__section_theme_light-mauve {
  background-color: var(--color-bg-mauve);
}

.page__section_offset-top {
  padding-top: var(--section-gap-top);
}

.page__section:first-of-type.page__section_offset-top {
  padding-top: var(--section-first-child-gap-top);
}

.page__section_offset-bottom {
  padding-bottom: var(--section-gap-bottom);
}

.page__section_round-bottom {
  border-bottom-right-radius: var(--layout-border-radius);
  border-bottom-left-radius: var(--layout-border-radius);
}

.page__section-inner {
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-padding-horizontal);
}

.page__breadcrumb {
  padding: 0 0 var(--section-breadcrumb-padding);
}

.page__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
}

.page__title_hero {
  font-size: var(--h1-hero-font-size);
  line-height: var(--h1-hero-line-height);
}

.page__title_xl {
  font-weight: 500;
  font-size: var(--h1-xl-font-size);
  line-height: var(--h1-xl-line-height);
  letter-spacing: -.02em;
}

.page__section-content {
  margin: var(--page-content-gap) 0 0;
}

@media screen and (min-width: 768px) {
  .page__title_hero:not(.page__title_xl) {
    font-weight: 300;
  }
}

/*
  Лонгрид: сетка из трёх вложенных колонок.
    text  — колонка чтения (--longread-text-width), по умолчанию для всех детей
    wide  — широкая (--longread-wide-width), для крупных картинок и видео
    full  — от края до края секции
  Модификаторы ребёнка: .longread__wide, .longread__full
*/

.longread {
  --longread-gutter: calc((var(--longread-wide-width) - var(--longread-text-width)) / 2);

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--layout-padding-horizontal), 1fr)
    [wide-start] minmax(0, var(--longread-gutter))
    [text-start] min(var(--longread-text-width), 100% - var(--layout-padding-horizontal) * 2)
    [text-end] minmax(0, var(--longread-gutter))
    [wide-end] minmax(var(--layout-padding-horizontal), 1fr)
    [full-end];
  font-family: var(--font-text);
  font-size: var(--text_primary-size);
  line-height: var(--text_primary-line-height);
}

.longread > * {
  grid-column: text;
  margin-top: 0;
  margin-bottom: var(--text_primary-line-height);
}

.longread > *:last-child {
  margin-bottom: 0;
}

.longread > .longread__wide {
  grid-column: wide;
}

.longread > .longread__full {
  grid-column: full;
}

/* Текст */

.longread p {
  word-wrap: break-word;
}

.longread__lead {
  font-family: var(--font-display);
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
}

.longread h2,
.longread h3,
.longread h4 {
  font-family: var(--font-display);
  font-weight: 400;
}

.longread h2 {
  margin: 72px 0 32px;
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
}

.longread h3 {
  margin: 56px 0 24px;
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
}

.longread h4 {
  margin: 40px 0 16px;
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
}

.longread :is(h2, h3, h4) + :is(h2, h3, h4) {
  margin-top: 0;
}

.longread a {
  text-decoration: underline;
  color: var(--color-text);
}

@media (hover: hover) {
  .longread a:hover {
    opacity: var(--opacity-hover);
  }
}

.longread b,
.longread strong {
  font-weight: 500;
}

.longread ul,
.longread ol {
  padding-left: 1.2em;
}

.longread li {
  margin: 0 0 8px;
}

.longread li:last-child {
  margin-bottom: 0;
}

.longread hr {
  width: 100%;
  height: 1px;
  margin-top: var(--text-element-gap);
  margin-bottom: var(--text-element-gap);
  border: none;
  background-color: var(--color-line);
}

/* Цитата-плашка, как .wiki-bquot у них */

.longread blockquote {
  margin-top: var(--text-element-gap);
  margin-bottom: var(--text-element-gap);
  margin-inline: 0;
  padding: var(--text-element-gap) var(--text-element-inner-gap-vertical);
  border-radius: var(--rounded-element-border-radius);
  background: var(--color-bg-mauve);
}

.longread blockquote p {
  margin: 0 0 var(--text_primary-line-height);
  font-family: var(--font-display);
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
}

.longread blockquote p:last-of-type {
  margin-bottom: 0;
}

.longread blockquote cite {
  display: block;
  margin-top: 24px;
  font-style: normal;
  font-size: var(--text_secondary-size);
  line-height: var(--text_secondary-line-height);
  color: var(--color-text-secondary);
}

/* Медиа: картинки, видео, подписи */

.longread figure {
  margin-top: var(--text-element-gap);
  margin-bottom: var(--text-element-gap);
  margin-inline: 0;
}

.longread figure img,
.longread figure video,
.longread__video {
  width: 100%;
  height: auto;
  border-radius: var(--rounded-element-border-radius);
}

.longread__full figure img,
.longread figure.longread__full img,
.longread figure.longread__full video {
  border-radius: 0;
}

.longread__video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-mauve);
}

.longread__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.longread figcaption {
  max-width: var(--longread-text-width);
  margin-top: 16px;
  font-size: var(--text_caption-size);
  line-height: var(--text_caption-line-height);
  color: var(--color-text-tertiary);
}

.longread figure.longread__full figcaption {
  padding: 0 var(--layout-padding-horizontal);
}

/* Две картинки рядом */

.longread__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.longread__pair img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .longread h2 {
    margin: 56px 0 24px;
  }

  .longread h3 {
    margin: 40px 0 16px;
  }

  .longread h4 {
    margin: 24px 0 8px;
  }

  .longread__pair {
    grid-template-columns: 1fr;
  }
}

/* Короткий текст о проекте под сеткой */
.about {
  max-width: 38rem;
  margin-top: var(--text-element-gap);
}

.about p {
  margin: 0 0 1.35em;
}

.about p:last-child {
  margin-bottom: 0;
}