/* Breakpoints */
:root {
    /* Fonts */
    --grotesque-font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --grotesque-font: Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range */
    /* Потому что в Чаптер нету знака рубля и поэтому первым используем шрифт, */
    /* в котором есть только 1 знак рубля, остальной текст берётся из Чаптера */
    --serif-font: Rouble, Charter, Georgia, 'Times New Roman', Times, serif;
    --ruble-sans-font: 'Ruble Sans';
    --ruble-serif-font: 'Ruble Serif';

    /* Font weight */
    --fontWeightBold: 600;

    /* Colors */
    --colorBlack: #000000;
    --colorWhite: #ffffff;
    --colorLink: #2e2ee5;
    --colorLinkHover: #bd1d00;
    --colorLinkHoverDark: #2424b2;
    --colorTinkoffYellow: #ffdf2e;
    --colorLightGray: #f8f8f8;
    --color-popover-text-default: var(--colorWhite);
    --color-input-error: #eb1000;
    --color-urania-background: #12151c;

    /* Sizes */
    --contentMaxWidth: 1220px;
    --contentLaptopWidth: 966px;
    --contentTabletWidth: 700px;
    --showcaseContentMaxWidth: 910px;
    --bodyMobilePaddingUrania: 20px;
    --bodyTabletPaddingUrania: 30px;

    /* z-index */
    --headerZIndex: 2000;

    /* URANIA */
    --transition-duration-default: 0.1s;
    --transition-duration-hover: 0.25s;
    --urania-max-content-width: 760px;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: Rouble;
    src: url('https://static2.tinkoffjournal.ru/fonts/rouble-serif-regular.v2.woff2') format('woff2'),
        url('https://static2.tinkoffjournal.ru/fonts/rouble-serif-regular.v2.woff') format('woff');
    unicode-range: U+20BD;
}
@font-face {
    font-family: 'Ruble Sans';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: var(--grotesque-font-fallback);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}
.grotesque-font-loaded body {
    font-family: Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: var(--grotesque-font);
    -webkit-font-variant-ligatures: no-contextual;
            -webkit-font-feature-settings: "calt" off;
                    font-feature-settings: "calt" off;
            font-variant-ligatures: no-contextual;
}
.grotesque-font-loaded .ruble--IT5k3 {
    font-family: 'Ruble Sans', Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: var(--ruble-sans-font), var(--grotesque-font);
}
.urania-app {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100vh;
    background-color: #12151c;
    background-color: var(--color-urania-background);
}
.urania-app-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Rouble;
    src: url('https://static2.tinkoffjournal.ru/fonts/rouble-serif-regular.v2.woff2') format('woff2'),
        url('https://static2.tinkoffjournal.ru/fonts/rouble-serif-regular.v2.woff') format('woff');
    unicode-range: U+20BD;
}

@font-face {
    font-family: 'Ruble Sans';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src: url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* Breakpoints */
:root {
    /* Fonts */
    --grotesque-font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --grotesque-font: Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range */
    /* Потому что в Чаптер нету знака рубля и поэтому первым используем шрифт, */
    /* в котором есть только 1 знак рубля, остальной текст берётся из Чаптера */
    --serif-font: Rouble, Charter, Georgia, 'Times New Roman', Times, serif;
    --ruble-sans-font: 'Ruble Sans';
    --ruble-serif-font: 'Ruble Serif';

    /* Font weight */
    --fontWeightBold: 600;

    /* Colors */
    --colorBlack: #000000;
    --colorWhite: #ffffff;
    --colorLink: #2e2ee5;
    --colorLinkHover: #bd1d00;
    --colorLinkHoverDark: #2424b2;
    --colorTinkoffYellow: #ffdf2e;
    --colorLightGray: #f8f8f8;
    --color-popover-text-default: var(--colorWhite);
    --color-input-error: #eb1000;
    --color-urania-background: #12151c;

    /* Sizes */
    --contentMaxWidth: 1220px;
    --contentLaptopWidth: 966px;
    --contentTabletWidth: 700px;
    --showcaseContentMaxWidth: 910px;
    --bodyMobilePaddingUrania: 20px;
    --bodyTabletPaddingUrania: 30px;

    /* z-index */
    --headerZIndex: 2000;

    /* URANIA */
    --transition-duration-default: 0.1s;
    --transition-duration-hover: 0.25s;
    --urania-max-content-width: 760px;
}

/*
  Если понадобится обновить файл, то:
    1. Берем лотти-файл у дизайнера
    2. Загружаем его в песочницу для работы с анимацией и смотрим, как что работает
    3. Создаем вручную css-анимации, за основу берем matrix(1, 0, 0, 1, 0, -10);
    4. Подкручиваем параметры матрицы на глаз, пока не будет классный результат
*/
.root--47qUx {
    width: 320px;
    height: 320px;
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    /* Добавляем анимацию появления чтобы не мельтешить при быстрой загрузке */
    -webkit-animation: cubic-bezier(1, -0.25, 0, 1.17) fadeIn--vc\+Ih 7s;
            animation: cubic-bezier(1, -0.25, 0, 1.17) fadeIn--vc\+Ih 7s;
}
.shipBodyBottom--ZeMfB, .shipBodyTop--r76mw, .shipTurbine--EGbs-, .shipCabin--rlqTa, .pilot--DppGl, .pilotHand--ZoM1q, .pilotLine--F3ee9, .pilotHat--JGTDv, .blaze--TaFxZ {
    stroke: var(--colorBlack);
    stroke-width: 2.83;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.shipBodyBottom--ZeMfB {
    fill: #dcdfe5;
}
.shipBodyTop--r76mw, .shipTurbine--EGbs-, .blazeBlink--VDr1M {
    fill: var(--colorWhite);
}
.shipCabin--rlqTa {
    fill: #efef4f;
}
.pilot--DppGl, .pilotHand--ZoM1q {
    fill: #538bff;
}
.pilotLine--F3ee9 {
    fill: none;
}
.pilotHat--JGTDv, .blaze--TaFxZ {
    fill: #f73a27;
}
.ship--QIewT, .blazeWrap--5bb3k {
    -webkit-transform: matrix(1, 0, 0, 1, 0, -10);
            transform: matrix(1, 0, 0, 1, 0, -10);
    -webkit-animation: flyingAnimate--jc3ew 2s infinite ease-in-out;
            animation: flyingAnimate--jc3ew 2s infinite ease-in-out;
}
.blazeTop--L9RyL {
    -webkit-transform: matrix(0.61364, 0, 0, 0.61364, 54, 70);
            transform: matrix(0.61364, 0, 0, 0.61364, 54, 70);
    -webkit-animation: blazeTopAnimate--LQBTK 1.8s infinite ease-in-out;
            animation: blazeTopAnimate--LQBTK 1.8s infinite ease-in-out;
}
.blazeDown--KAZ-L {
    -webkit-transform: matrix(0.61364, 0, 0, 0.61364, 54, 120);
            transform: matrix(0.61364, 0, 0, 0.61364, 54, 120);
    -webkit-animation: blazeDownAnimate--hbLxF 1.8s infinite ease-in-out;
            animation: blazeDownAnimate--hbLxF 1.8s infinite ease-in-out;
}
@-webkit-keyframes fadeIn--vc\+Ih {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeIn--vc\+Ih {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@-webkit-keyframes flyingAnimate--jc3ew {
    from, to {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -10);
                transform: matrix(1, 0, 0, 1, 0, -10);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 10);
                transform: matrix(1, 0, 0, 1, 0, 10);
    }
}
@keyframes flyingAnimate--jc3ew {
    from, to {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -10);
                transform: matrix(1, 0, 0, 1, 0, -10);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 10);
                transform: matrix(1, 0, 0, 1, 0, 10);
    }
}
@-webkit-keyframes blazeTopAnimate--LQBTK {
    from, to {
        -webkit-transform: matrix(0.61364, 0, 0, 0.61364, 54, 70);
                transform: matrix(0.61364, 0, 0, 0.61364, 54, 70);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
    }
}
@keyframes blazeTopAnimate--LQBTK {
    from, to {
        -webkit-transform: matrix(0.61364, 0, 0, 0.61364, 54, 70);
                transform: matrix(0.61364, 0, 0, 0.61364, 54, 70);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
    }
}
@-webkit-keyframes blazeDownAnimate--hbLxF {
    from, to {
        -webkit-transform: matrix(0.61364, 0, 0, 0.61364, 54, 120);
                transform: matrix(0.61364, 0, 0, 0.61364, 54, 120);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
    }
}
@keyframes blazeDownAnimate--hbLxF {
    from, to {
        -webkit-transform: matrix(0.61364, 0, 0, 0.61364, 54, 120);
                transform: matrix(0.61364, 0, 0, 0.61364, 54, 120);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

.root--Cl9zT {
    font-weight: normal;
    font-size: 17px;
    line-height: 25px;
    color: var(--colorWhite);
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.body-primary--YDbrp {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}

@media (min-width: 760px) {

.body-primary--YDbrp {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }

.body-secondary--JgmHy, button.a--\+L-Zm {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}

@media (min-width: 760px) {

.body-secondary--JgmHy, button.a--\+L-Zm {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }

.body-large--CZZT0 {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.body-large-bold--SXINw {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body-medium--eVsHs {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}

.body-medium-bold--mRAdB {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}

.body-small--3jiNm {
    font: 13px/15px Graphik;
    font: var(--body-small);
}

.body-small-bold--vwlmZ {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}

.tj-light-theme {
    --opacity-link-border: 0.3;
    --opacity-link-border-hover: 0.7;
}

.tj-dark-theme {
    --opacity-link-border: 0.5;
    --opacity-link-border-hover: 0.7;
}

/* Добавляем тег в селекторы, чтобы повысить их вес.
Это нужно для того, чтобы стили кита не перебивались
стилями из старого фронта */

.a--\+L-Zm, a.a--\+L-Zm, button.a--\+L-Zm {
    --color-link-border: rgba(var(--surface-on-interactive), var(--opacity-link-border));
    --color-link-border-hover: rgba(var(--surface-on-interactive), var(--opacity-link-border-hover));

    --color-link-positive-border: rgba(var(--surface-on-positive), var(--opacity-link-border));
    --color-link-positive-border-hover: rgba(var(--surface-on-positive), var(--opacity-link-border-hover));

    --color-link-negative-border: rgba(var(--surface-on-negative), var(--opacity-link-border));
    --color-link-negative-border-hover: rgba(var(--surface-on-negative), var(--opacity-link-border-hover));

    --color-link-warning-border: rgba(var(--surface-on-warning), var(--opacity-link-border));
    --color-link-warning-border-hover: rgba(var(--surface-on-warning), var(--opacity-link-border-hover));

    --color-link-placeholder-border: rgba(var(--surface-on-placeholder), var(--opacity-link-border));
    --color-link-placeholder-border-hover: rgba(var(--surface-on-placeholder), var(--opacity-link-border-hover));

    color: rgb(var(--surface-on-interactive));
    text-decoration: none;
    cursor: pointer;
    padding-bottom: 3px
}

@media (hover: hover) {
        .a--\+L-Zm:hover, a.a--\+L-Zm:hover, button.a--\+L-Zm:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--surface-on-interactive));
            background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-link-border-hover)), to(var(--color-link-border-hover)));
            background-image: linear-gradient(var(--color-link-border-hover), var(--color-link-border-hover));
            background-repeat: repeat-x;
            background-size: 100% 1px;
            background-position: 0 100%;
        }
    }

button.a--\+L-Zm {

    /* Отключаем стандартные стили кнопки */
    background-color: transparent;
    border: none;
    -webkit-appearance: none;

    /* Заменяем стандартные размеры кнопки, чтобы ссылки через a и button не отличались визуально */
    padding: 0 0 3px;
    line-height: 1;
}

a.a--\+L-Zm[data-pseudo='true'], button.a--\+L-Zm[data-pseudo='true'] {
    background-image: linear-gradient(to right, var(--color-link-border) 5px, transparent 4px);
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: calc(5px + 4px) 1px
}

@media (hover: hover) {
        a.a--\+L-Zm[data-pseudo='true']:hover, button.a--\+L-Zm[data-pseudo='true']:hover {
            background-image: linear-gradient(to right, var(--color-link-border-hover) 5px, transparent 4px);
        }
    }

a.a--\+L-Zm[data-secondary='true'], button.a--\+L-Zm[data-secondary='true'] {
    color: rgb(var(--surface-on-secondary));
    background-image:
        -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(var(--surface-on-secondary), var(--opacity-link-border))),
            to(rgba(var(--surface-on-secondary), var(--opacity-link-border)))
        );
    background-image:
        linear-gradient(
            rgba(var(--surface-on-secondary), var(--opacity-link-border)),
            rgba(var(--surface-on-secondary), var(--opacity-link-border))
        );
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 100% 1px
}

@media (hover: hover) {
        a.a--\+L-Zm[data-secondary='true']:hover, button.a--\+L-Zm[data-secondary='true']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--surface-on-secondary));
            background-image:
                -webkit-gradient(
                    linear,
                    left top, left bottom,
                    from(rgba(var(--surface-on-secondary), var(--opacity-link-border-hover))),
                    to(rgba(var(--surface-on-secondary), var(--opacity-link-border-hover)))
                );
            background-image:
                linear-gradient(
                    rgba(var(--surface-on-secondary), var(--opacity-link-border-hover)),
                    rgba(var(--surface-on-secondary), var(--opacity-link-border-hover))
                );
        }
    }

a.a--\+L-Zm[data-surface='positive'], button.a--\+L-Zm[data-surface='positive'] {
    color: rgb(var(--surface-on-positive));
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-link-positive-border)), to(var(--color-link-positive-border)));
    background-image: linear-gradient(var(--color-link-positive-border), var(--color-link-positive-border))
}

@media (hover: hover) {
        a.a--\+L-Zm[data-surface='positive']:hover, button.a--\+L-Zm[data-surface='positive']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--surface-on-positive));
            background-image:
                -webkit-gradient(
                    linear,
                    left top, left bottom,
                    from(var(--color-link-positive-border-hover)),
                    to(var(--color-link-positive-border-hover))
                );
            background-image:
                linear-gradient(
                    var(--color-link-positive-border-hover),
                    var(--color-link-positive-border-hover)
                );
        }
    }

a.a--\+L-Zm[data-surface='negative'], button.a--\+L-Zm[data-surface='negative'] {
    color: rgb(var(--surface-on-negative));
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-link-negative-border)), to(var(--color-link-negative-border)));
    background-image: linear-gradient(var(--color-link-negative-border), var(--color-link-negative-border))
}

@media (hover: hover) {
        a.a--\+L-Zm[data-surface='negative']:hover, button.a--\+L-Zm[data-surface='negative']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--surface-on-negative));
            background-image:
                -webkit-gradient(
                    linear,
                    left top, left bottom,
                    from(var(--color-link-negative-border-hover)),
                    to(var(--color-link-negative-border-hover))
                );
            background-image:
                linear-gradient(
                    var(--color-link-negative-border-hover),
                    var(--color-link-negative-border-hover)
                );
        }
    }

a.a--\+L-Zm[data-surface='warning'], button.a--\+L-Zm[data-surface='warning'] {
    color: rgb(var(--surface-on-warning));
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-link-warning-border)), to(var(--color-link-warning-border)));
    background-image: linear-gradient(var(--color-link-warning-border), var(--color-link-warning-border))
}

@media (hover: hover) {
        a.a--\+L-Zm[data-surface='warning']:hover, button.a--\+L-Zm[data-surface='warning']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--surface-on-warning));
            background-image:
                -webkit-gradient(
                    linear,
                    left top, left bottom,
                    from(var(--color-link-warning-border-hover)),
                    to(var(--color-link-warning-border-hover))
                );
            background-image:
                linear-gradient(
                    var(--color-link-warning-border-hover),
                    var(--color-link-warning-border-hover)
                );
        }
    }

a.a--\+L-Zm[data-surface='placeholder'], button.a--\+L-Zm[data-surface='placeholder'] {
    color: rgb(var(--surface-on-placeholder));
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-link-placeholder-border)), to(var(--color-link-placeholder-border)));
    background-image: linear-gradient(var(--color-link-placeholder-border), var(--color-link-placeholder-border))
}

@media (hover: hover) {
        a.a--\+L-Zm[data-surface='placeholder']:hover, button.a--\+L-Zm[data-surface='placeholder']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--surface-on-placeholder));
            background-image:
                -webkit-gradient(
                    linear,
                    left top, left bottom,
                    from(var(--color-link-placeholder-border-hover)),
                    to(var(--color-link-placeholder-border-hover))
                );
            background-image:
                linear-gradient(
                    var(--color-link-placeholder-border-hover),
                    var(--color-link-placeholder-border-hover)
                );
        }
    }

.head--HMO5b {
    margin: 0;
    padding: 0;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 40px
}

@media (min-width: 768px) {

.head--HMO5b {
        margin-top: 20px;
        font-size: 55px;
        line-height: 55px
}
    }

.lead--JY2fA {
    margin: 9px 0 40px;
    font-size: 17px;
    line-height: 25px;
    padding: 0;
    color: rgb(var(--surface-on-secondary))
}

@media (min-width: 768px) {

.lead--JY2fA {
        margin: 14px 0 50px;
        font-size: 20px;
        line-height: 30px
}
    }

.link---k8Yk {
    padding-top: 2px;
    background-size: 13px;
    background-repeat: no-repeat
}

@media (min-width: 768px) {

.link---k8Yk {
        background-size: 16px
}
    }

.link---k8Yk.appleStore--mQSyF {
    padding-left: 22px;
    background-image: url("data:image/svg+xml,%3csvg width='16' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.814 0C9.678.714 8.013 1.429 8.25 4.524c2.137-.476 4.04-1.667 3.564-4.524zM5.03 4.298C2.97 4.298 0 6.108 0 9.5 0 14.25 3.2 19 5.029 19c1.371 0 2.514-.905 3.428-.905.914 0 1.829.905 3.2.905 1.829 0 3.886-2.714 4.343-5.202-1.6-1.131-2.743-1.81-2.743-3.846 0-1.357 1.143-2.714 2.514-3.845-.685-.905-2.057-1.81-3.428-1.81-1.372 0-2.846 1.074-3.886 1.132-.914 0-2.057-1.131-3.428-1.131z' fill='%23D0D0D2'/%3e%3c/svg%3e");
    background-position: 4px 2px;
    background-size: 13.33px
}

@media (min-width: 768px) {

.link---k8Yk.appleStore--mQSyF {
        padding-left: 26px;
        background-position: 4px 0;
        background-size: 16px
}
    }

.link---k8Yk.googlePlay--qxzqr {
    padding-left: 20px;
    background-image: url("data:image/svg+xml,%3csvg width='16' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M.415 17.748l7.66-7.876 2.699 2.776-9.105 5.206c-.346.198-.77.195-1.114-.009l-.14-.097zm6.887-8.67L0 16.586V1.57l7.302 7.508zm4.563-3.103l3.567 2.04c.35.2.568.577.568.985 0 .408-.217.784-.568.985l-3.665 2.095-2.92-3.002 3.018-3.103zM.335.325A1.107 1.107 0 011.67.147l9.201 5.26-2.797 2.877L.334.324z' fill='%23D0D0D2'/%3e%3c/svg%3e");
    background-position: 3px 2px
}

@media (min-width: 768px) {

.link---k8Yk.googlePlay--qxzqr {
        padding-left: 25px;
        background-position: 4px 1px
}
    }

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.body-primary--PwM66 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}
@media (min-width: 760px) {
.body-primary--PwM66 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }
.body-secondary--DE13g {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}
@media (min-width: 760px) {
.body-secondary--DE13g {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }
.body-large--4gu6Y {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large-bold--DUX4P {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--CTLYU, .caption--kKmkW {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium-bold--PRdzv {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--TVs1u {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small-bold--POCUQ {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
.caption--kKmkW {
    margin-top: 15px;
    margin-bottom: 30px
}
@media (min-width: 820px) {
.caption--kKmkW {
        margin-top: 20px;
        margin-bottom: 50px
}
    }
.caption--kKmkW[data-nomargin='true'] {
    margin: 0;
}

.button----2UA {
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(var(--surface-primary));
    color: rgb(var(--control-#000));
    color: rgb(var(--control-initial));
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2), 0 0 2px rgba(2, 0, 20, 0.18);
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2), 0 0 2px rgba(2, 0, 20, 0.18);
    cursor: pointer;
    outline: none;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.button----2UA[data-hidden='true'] {
    opacity: 0;
    visibility: hidden;
}

.button----2UA.focus-visible--8NgbU {
    color: rgb(var(--control-hover));
}

.button----2UA:focus-visible {
    color: rgb(var(--control-hover));
}

.button----2UA > svg {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.button----2UA[data-direction='left'] > svg {
    left: 14px;
}

.button----2UA[data-direction='right'] > svg {
    right: 14px;
}

@media (hover: hover) {
    .button----2UA:hover {
        color: rgb(var(--control-hover));
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.body-primary--eEaKc {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}

@media (min-width: 760px) {

.body-primary--eEaKc {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }

.body-secondary--jg1j2 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}

@media (min-width: 760px) {

.body-secondary--jg1j2 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }

.body-large--tws\+j {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.body-large-bold--Wi0fh {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body-medium--ljwbk, .counter--eEX3x {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}

.body-medium-bold--coLZx {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}

.body-small--99BvF {
    font: 13px/15px Graphik;
    font: var(--body-small);
}

.body-small-bold--wqwG0 {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}

.inner--b1B9X {
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.scroller--qagIw {
    -webkit-scroll-snap-type: x mandatory;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;

    /* this will hide the scrollbar in old mozilla based browsers */
    overflow: -moz-scrollbars-none;

    /* For Firefox 64+ scrollbar */
    scrollbar-width: none;

    /* this will hide the scrollbar in internet explorers */
    -ms-overflow-style: none
}

@media (min-width: 820px) {

.scroller--qagIw {
        -webkit-scroll-snap-type: none;
            -ms-scroll-snap-type: none;
                scroll-snap-type: none
}
    }

.scroller--qagIw::-webkit-scrollbar {
    height: 0;
    background: transparent;
    display: none;
}

.scroller--qagIw[data-dragging='true'] {
    -webkit-scroll-snap-type: none;
        -ms-scroll-snap-type: none;
            scroll-snap-type: none;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.scroller--qagIw > * {
    --scroll-margin: 20px;

    scroll-snap-align: start;
    scroll-margin-left: var(--scroll-margin);

    /* Для Safari */
    scroll-snap-margin: var(--scroll-margin);
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-user-drag: none;
    padding-right: 20px;

    /* Сейчас в базовых стилях из старого фронта всем
    элементам на странице проставляется box-sizing: border-box.
    Поэтому явно ставим */
    -webkit-box-sizing: content-box;
            box-sizing: content-box
}

@media (min-width: 760px) {

.scroller--qagIw > * {
        --scroll-margin: 30px
}
    }

.scroller--qagIw > *:first-child {
    padding-left: 20px
}

@media (min-width: 760px) {

.scroller--qagIw > *:first-child {
        padding-left: 30px
}
    }

@media (min-width: 760px) {

.scroller--qagIw > *:last-child {
        padding-right: 30px
}
    }

.swiper--3rwAG[data-fotorama='true'] .scroller--qagIw > * {
    padding-right: 5px
}

@media (min-width: 760px) {

.swiper--3rwAG[data-fotorama='true'] .scroller--qagIw > * {
        --scroll-margin: calc((100vw - 700px) / 2);

        padding-right: 10px
}
    }

.swiper--3rwAG[data-fotorama='true'] .scroller--qagIw > *:first-child {
    padding-left: var(--scroll-margin)
}

@media (min-width: 820px) {

.swiper--3rwAG[data-fotorama='true'] .scroller--qagIw > *:first-child {
        padding-left: 0
}
    }

.swiper--3rwAG[data-fotorama='true'] .scroller--qagIw > *:last-child {
    padding-right: var(--scroll-margin)
}

@media (min-width: 820px) {

.swiper--3rwAG[data-fotorama='true'] .scroller--qagIw > *:last-child {
        padding-right: 0
}
    }

.button--AwNqH {
    display: none;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 1;
    top: 35px
}

@media (min-width: 820px) {

.button--AwNqH {
        display: block
}
    }

.button--AwNqH[data-control='prev'] {
    left: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.button--AwNqH[data-control='next'] {
    right: 0;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
}

.swiper--3rwAG[data-fotorama='true'] .button--AwNqH {
    top: 50%;
}

.swiper--3rwAG[data-fotorama='true'] .button--AwNqH[data-control='prev'] {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.swiper--3rwAG[data-fotorama='true'] .button--AwNqH[data-control='next'] {
    -webkit-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
}

.description--KmWIH {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    padding: 0 20px
}

@media (min-width: 760px) {

.description--KmWIH {
        max-width: 700px;
        padding: 0
}
    }

@media (min-width: 820px) {

.description--KmWIH {
        max-width: 760px
}
    }

.counter--eEX3x {
    -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
    font-variant: tabular-nums;
    min-width: 45px;
    margin-right: 5px;
    margin-top: 15px
}

@media (min-width: 820px) {

.counter--eEX3x {
        margin-top: 20px
}
    }

.counter--eEX3x[data-nomargin='true'] {
    margin: 0;
}

.circle--F9dTC {
    opacity: 0.2;
}

.progressCircle--8ZihV {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
}

.root--wwSgM[data-color='green'] .progressCircle--8ZihV, .root--wwSgM[data-color='green'] .circle--F9dTC {
    stroke: rgb(var(--interactive-additional));
}

.root--wwSgM[data-color='white'] .progressCircle--8ZihV, .root--wwSgM[data-color='white'] .circle--F9dTC {
    stroke: #d5d5d5;
}

.root--CjrFx {
    background: var(--surface-on-award);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.progressCircleWrapper--KCAVx {
    position: relative;
    top: 1px;
    margin-right: 5px;
}

.finishedText--xCyno {
    position: relative;
    top: -2px;
}

.progress--HSrbu {
    color: rgb(var(--interactive-additional));
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 1px;
}

.picture--VQhIa {
    max-width: 100%;
    max-height: 100%;
}

.picture--VQhIa[data-stretched='true'] {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.image--VJISJ {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.picture--VQhIa[data-covered='true'] .image--VJISJ {
    -o-object-fit: cover;
       object-fit: cover;
}

.picture--VQhIa[data-stretched='true'] .image--VJISJ {
    width: 100%;
    height: 100%;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */

.root--zSQjC {
    display: block;
    width: 240px;
    line-height: 20px;
    color: rgb(var(--surface-on-primary));
    text-decoration: none;
}

.imageContainer--ux0XZ {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 120px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.imageContainer--ux0XZ[data-is-finished='true'] {
    position: relative;
    border-radius: 5px;
}

.imageContainer--ux0XZ[data-is-finished='true']::before {
    content: '';
    position: absolute;
    width: 240px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3csvg width='240' height='120' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='2.5' y='2.5' width='235' height='115' rx='7.5' stroke='url(%23aFinishedLessonFrame)' stroke-width='5'/%3e%3clinearGradient id='aFinishedLessonFrame' x1='-.045' y1='-.024' x2='143.914' y2='282.946' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FEE487'/%3e%3cstop offset='.568' stop-color='%23D8A93E'/%3e%3cstop offset='1' stop-color='%23D0952C'/%3e%3c/linearGradient%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.image--CZaB5 {
    overflow: hidden;
    position: relative;
    display: block;
    width: 260px;
    border-radius: 10px;
    background-color: rgb(var(--surface-on-static));
    max-width: 100%;
}

.imageContainer--ux0XZ[data-is-finished='true'] .image--CZaB5 {
    border-radius: 10px;
}

.title--rscDO {
    font: var(--interface-secondary);
    margin: 0 0 5px;
}

.announceDate--isTw1 {
    color: rgb(var(--surface-on-placeholder));
    margin: 5px 0 0;
}

@media (hover: hover) {
    .root--zSQjC:hover .title--rscDO {
        color: rgb(var(--surface-on-hover));
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.accent-number--vBnJw {
    font: 45px/50px Graphik;
    font: var(--accent-number);
}

.accent-quote--FrvyO, .foreground--2krPA[data-emoji] {
    font: 25px/35px Graphik;
    font: var(--accent-quote-mobile)
}

@media (min-width: 760px) {

.accent-quote--FrvyO, .foreground--2krPA[data-emoji] {
        font: 35px/50px Graphik;
        font: var(--accent-quote-desktop)
}
    }

.accent-lead--RwZ0h {
    font: 23px/30px Charter;
    font: var(--accent-lead-mobile)
}

@media (min-width: 760px) {

.accent-lead--RwZ0h {
        font: 27px/35px Charter;
        font: var(--accent-lead-desktop);
        letter-spacing: -0.3px
}
    }

.accent-bold--eriDm {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile)
}

@media (min-width: 760px) {

.accent-bold--eriDm {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop)
}
    }

.accent-label--qaLMn {
    font: 13px/15px Graphik;
    font: var(--accent-label-mobile);
    letter-spacing: 1px;
    text-transform: uppercase
}

@media (min-width: 760px) {

.accent-label--qaLMn {
        font: 15px/20px Graphik;
        font: var(--accent-label-desktop)
}
    }

.highlight--Dgb8D {
    background-color: var(--color-highlight);
    color: var(--color-highlight-on);
    -webkit-box-shadow:
        -5px -3px 0 var(--color-highlight),
        5px -3px 0 var(--color-highlight),
        -5px 3px 0 var(--color-highlight),
        5px 3px 0 var(--color-highlight);
            box-shadow:
        -5px -3px 0 var(--color-highlight),
        5px -3px 0 var(--color-highlight),
        -5px 3px 0 var(--color-highlight),
        5px 3px 0 var(--color-highlight);
}

.foreground--2krPA {
    --background-opacity: 1;
    --color-opacity: 1;
    --default-color: rgb(var(--surface-secondary));

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
    background-color: var(--default-color);
    color: rgb(var(--surface-on-secondary));
    border: 1px solid rgb(var(--border-surface));
    border-radius: 15px;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;

    /* TODO уточнить при сборке первой тестовой статьи */
    margin-bottom: 20px;
}

.foreground--2krPA + .foreground--2krPA {
    margin-top: 30px;
}

.foreground--2krPA[data-nomargin='true'] {
    margin: 0;
}

.foreground--2krPA[data-vert-padding='true'] {
    padding-top: 15px;
    padding-bottom: 20px;
}

.foreground--2krPA[data-hor-padding='true'] {
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 760px) {
    .foreground--2krPA {
        margin-bottom: 30px;
    }

    .foreground--2krPA[data-vert-padding='true'] {
        padding-top: 25px;
        padding-bottom: 30px;
    }

    .foreground--2krPA[data-hor-padding='true'] {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.foreground--2krPA[data-surface='interactive'] {
    background-color: rgba(var(--surface-interactive), var(--background-opacity));
    border: 1px solid rgba(var(--surface-on-interactive), var(--opacity-border-disabled));
}

.foreground--2krPA[data-surface='positive'] {
    background-color: rgba(var(--surface-positive), var(--background-opacity));
    border: 1px solid rgba(var(--surface-on-positive), var(--opacity-border-disabled));
}

.foreground--2krPA[data-surface='negative'] {
    background-color: rgba(var(--surface-negative), var(--background-opacity));
    border: 1px solid rgba(var(--surface-on-negative), var(--opacity-border-disabled));
}

.foreground--2krPA[data-surface='warning'] {
    background-color: rgba(var(--surface-warning), var(--background-opacity));
    border: 1px solid rgba(var(--surface-on-warning), var(--opacity-border-disabled));
}

.foreground--2krPA[data-surface='neutral'] {
    background-color: rgb(var(--surface-primary));
}

.foreground--2krPA[data-surface-on='interactive'] {
    color: rgba(var(--surface-on-interactive), var(--color-opacity));
}

.foreground--2krPA[data-surface-on='positive'] {
    color: rgba(var(--surface-on-positive), var(--color-opacity));
}

.foreground--2krPA[data-surface-on='negative'] {
    color: rgba(var(--surface-on-negative), var(--color-opacity));
}

.foreground--2krPA[data-surface-on='warning'] {
    color: rgba(var(--surface-on-warning), var(--color-opacity));
}

.foreground--2krPA[data-disabled='true'], .foreground--2krPA[data-disabled='true']:hover {
    --background-opacity: var(--opacity-surface-disabled);
    --color-opacity: var(--opacity-surface-on-disabled);
    --default-color: var(--surface-disabled);

    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: default;
}

@media (hover: hover) {
    .foreground--2krPA[data-hover='true']:hover {
        cursor: pointer;
        background-color: rgb(var(--surface-hover));
    }

    .foreground--2krPA[data-hover='true'][data-surface='interactive']:hover {
        background-color: rgb(var(--surface-interactive-hover));
    }

    .foreground--2krPA[data-hover='true'][data-surface='positive']:hover {
        background-color: rgb(var(--surface-positive-hover));
    }

    .foreground--2krPA[data-hover='true'][data-surface='warning']:hover {
        background-color: rgb(var(--surface-warning-hover));
    }

    .foreground--2krPA[data-hover='true'][data-surface='negative']:hover {
        background-color: rgb(var(--surface-negative-hover));
    }
}

.foreground--2krPA[data-bubble='true'] {
    position: relative;
}

/* Чтобы получить стрелочку рисуем три треугольника. Первые два нужны для отрисовки бордера. Т.к. бордер с прозрачностью,
то нужно положить его на фон плашки, поэтому первый цвета фона плашки, а второй - цвета бордера.
Третий треугольник закрывает кусок бордера плашки и серединку первых двух, чтобы получился бордер у стрелочки
*/

.arrow--6\+l6i, .arrow--6\+l6i::before, .arrow--6\+l6i::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.arrow--6\+l6i {
    --arrow-background: rgb(var(--surface-secondary));
    --arrow-border: rgb(var(--border-surface));
    --arrow-size: 15px;

    border-width: var(--arrow-size) 0 0 var(--arrow-size);
    border-color: transparent transparent transparent var(--arrow-background);
    bottom: calc(100% + 1px);
    left: 27px;
}

.arrow--6\+l6i::before {
    content: '';
    border-width: var(--arrow-size) 0 0 var(--arrow-size);
    border-color: transparent transparent transparent var(--arrow-border);
    bottom: 0;
    right: 0;
}

.arrow--6\+l6i::after {
    content: '';
    border-width: calc(var(--arrow-size) - 1px) 0 0 calc(var(--arrow-size) - 1px);
    border-color: transparent transparent transparent var(--arrow-background);
    bottom: -1px;
    right: 0.2px;
}

.foreground--2krPA[data-bubble='true'][data-surface='interactive'] .arrow--6\+l6i {
    --arrow-background: rgb(var(--surface-interactive));
    --arrow-border: rgba(var(--surface-on-interactive), var(--opacity-border-disabled));
}

.foreground--2krPA[data-bubble='true'][data-surface='positive'] .arrow--6\+l6i {
    --arrow-background: rgb(var(--surface-positive));
    --arrow-border: rgba(var(--surface-on-positive), var(--opacity-border-disabled));
}

.foreground--2krPA[data-bubble='true'][data-surface='warning'] .arrow--6\+l6i {
    --arrow-background: rgb(var(--surface-warning));
    --arrow-border: rgba(var(--surface-on-warning), var(--opacity-border-disabled));
}

.foreground--2krPA[data-bubble='true'][data-surface='negative'] .arrow--6\+l6i {
    --arrow-background: rgb(var(--surface-negative));
    --arrow-border: rgba(var(--surface-on-negative), var(--opacity-border-disabled));
}

.foreground--2krPA[data-bubble='true'][data-surface='neutral'] .arrow--6\+l6i {
    --arrow-background: rgb(var(--surface-primary));
}

@media (hover: hover) {
    .foreground--2krPA[data-bubble='true'][data-hover='true'][data-surface='interactive']:hover .arrow--6\+l6i {
        --arrow-background: rgb(var(--surface-interactive-hover));
    }

    .foreground--2krPA[data-bubble='true'][data-hover='true'][data-surface='positive']:hover .arrow--6\+l6i {
        --arrow-background: rgb(var(--surface-positive-hover));
    }

    .foreground--2krPA[data-bubble='true'][data-hover='true'][data-surface='warning']:hover .arrow--6\+l6i {
        --arrow-background: rgb(var(--surface-warning-hover));
    }

    .foreground--2krPA[data-bubble='true'][data-hover='true'][data-surface='negative']:hover .arrow--6\+l6i {
        --arrow-background: rgb(var(--surface-negative-hover));
    }
}

@media (min-width: 760px) {

.inner--Sdt-\+ {
        margin: 0 auto;
        max-width: 700px
}
    }

@media (min-width: 820px) {

.inner--Sdt-\+ {
        max-width: unset
}
    }

@media (min-width: 760px) {

.foreground--2krPA[data-hor-padding='false'] .inner--Sdt-\+ {
        max-width: unset
}
    }

@media (min-width: 760px) {

.emoji--lz1f7 {
        font-size: 40px;
        margin-bottom: 15px
}
    }

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.interface-heading-one--J3VnD {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--J3VnD {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--s9t-R {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--BTP7v, .link--\+\+oh7 {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--\+zQjM {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--\+zQjM {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--B1IjD {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--POV8v {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--POV8v {
        font: var(--interface-heading)
}
    }

.link--\+\+oh7 {
    color: rgb(var(--surface-on-secondary));
    text-decoration: none;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
}

.arrow--s\+OBS {
    margin-left: 7px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.arrow--s\+OBS[data-direction='down'] {
    margin-left: 10px;
}

@media (hover: hover) {
    .link--\+\+oh7:hover {
        color: rgb(var(--surface-on-hover));
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--f26P7, .h1--xjzTa {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--f26P7, .h1--xjzTa {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--yNqMd, .h2--USJF3, .title--8gXlG {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--yNqMd, .h2--USJF3, .title--8gXlG {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--OUT67, .h3--3XpiA {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--2H\+-2, .h4---pFKq {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--2H\+-2, .h4---pFKq {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--am-az, .h5--m1D5m {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--syxm4, .h6--u35KF {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--syxm4, .h6--u35KF {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.root--3wVtw {
    margin: 0 -20px
}

@media (min-width: 768px) {

.root--3wVtw {
        margin: 0
}
    }

.title--8gXlG {
    margin: 0 0 19px;
    padding: 0 var(--bodyMobilePaddingUrania);
    color: rgb(var(--surface-on-primary))
}

@media (min-width: 768px) {

.title--8gXlG {
        padding: 0 var(--bodyTabletPaddingUrania)
}
    }

.root--3wVtw[data-with-hor-padding='true'] .title--8gXlG {
    padding: 0;
}

.title--8gXlG[data-has-description='true'] {
    margin-bottom: 10px;
}

.description--BmAnx {
    margin: 0 0 30px;
    padding: 0;
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.linkWithArrowWrapper--ARIzq {
    margin-top: 20px;
    padding: 0 var(--bodyMobilePaddingUrania);
    color: rgb(var(--surface-on-primary))
}

@media (min-width: 768px) {

.linkWithArrowWrapper--ARIzq {
        padding: 0 var(--bodyTabletPaddingUrania)
}
    }

.linkWithArrowWrapper--ARIzq[data-arrow-margin-size='m'] {
    margin-top: 30px;
}

.contentWrapper--TFUZg {
    padding: 20px 0 19px
}

@media (min-width: 768px) {

.contentWrapper--TFUZg {
        padding: 25px 0 24px
}
    }

.root--Hh2uH {
    margin-top: 40px
}
@media (min-width: 768px) {
    .root--Hh2uH {
        margin-top: 50px
}
    }

.root--3rZiz {
    position: relative;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    overflow: hidden;
    -webkit-font-feature-settings: 'tnum' on, 'lnum' on;
            font-feature-settings: 'tnum' on, 'lnum' on;
    padding-top: 2px;
}

.currentNumber--o9Le8 {
    position: relative;
    left: 0;
    top: 0;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-duration: var(--animation-duration);
            animation-duration: var(--animation-duration);
}

.currentNumber--o9Le8.animated--y2Xbq {
    -webkit-animation-name: roll--AlCQS;
            animation-name: roll--AlCQS;
}

.currentNumber--o9Le8.animated--y2Xbq.initial--mg2rG, .currentNumber--o9Le8.animated--y2Xbq.final--hAhqu {
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
}

.currentNumber--o9Le8.animated--y2Xbq.initial--mg2rG {
    -webkit-animation-name: initialRoll--C91yk;
            animation-name: initialRoll--C91yk;
}

.currentNumber--o9Le8.animated--y2Xbq.final--hAhqu {
    -webkit-animation-name: finalRoll--S-eoA;
            animation-name: finalRoll--S-eoA;
}

@-webkit-keyframes initialRoll--C91yk {
    0% {
        top: 0;
    }
    100% {
        top: -14px;
    }
}

@keyframes initialRoll--C91yk {
    0% {
        top: 0;
    }
    100% {
        top: -14px;
    }
}

@-webkit-keyframes roll--AlCQS {
    0% {
        top: 14px;
    }
    100% {
        top: -14px;
    }
}

@keyframes roll--AlCQS {
    0% {
        top: 14px;
    }
    100% {
        top: -14px;
    }
}

@-webkit-keyframes finalRoll--S-eoA {
    0% {
        top: 14px;
    }
    100% {
        top: 0;
    }
}

@keyframes finalRoll--S-eoA {
    0% {
        top: 14px;
    }
    100% {
        top: 0;
    }
}

.price--RKJQk {
    display: inline-block;
    width: 54px;
    line-height: 18px;
    background-color: rgba(var(--surface-on-primary), var(--opacity-control-disabled));
    border-radius: 10px;
    margin: 3px 10px 0 -2px;
    padding: 2px 6px 0;
    text-align: center;
}

.price--RKJQk.buyersPrice--msvyz {
    padding: 0 6px;
}

.icon--4vHcl {
    position: relative;
}

.bookIcon--LtsU\+ {
    top: 2px;
}

.watchIcon--21zWR {
    top: 3px;
}

.lessonsCount--X44z4, .durationValue--\+z8gg {
    padding-left: 2px;
}

.lessonsCount--X44z4 {
    margin-right: 8px;
}

.metaWrapper--uzsox {
    display: inline-block;
    margin-top: 3px;
    white-space: nowrap;
}

.root--IQ6xj {
    padding-left: 1px;
    margin-top: 1px;
    font: var(--interface-caption);
    color: rgb(var(--surface-on-secondary));
}

.root--IQ6xj[data-is-activity='true'] {
    margin-top: 5px;
}

.activityWrapper--Unuu9 {
    position: relative;
    left: -2px;
}

.root--\+Gzni {
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.link--AsvtF {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 10px;
    text-decoration: none;
    min-height: 375px;
    max-height: 420px;
    color: rgb(var(--surface-on-primary));
    background-color: rgb(var(--surface-primary))
}

@media (min-width: 359px) and (max-width: 767px) {

.link--AsvtF {
        min-height: 420px;
        max-height: none;
        max-height: initial
}
    }

@media (min-width: 768px) {

.link--AsvtF {
        min-height: 300px;
        max-height: none;
        max-height: initial;
        border: 1px solid rgb(var(--border-surface))
}
    }

.root--\+Gzni[data-is-bonus='true'] {
    background-color: rgb(var(--surface-primary));
    border: 1px solid rgb(var(--border-surface));
}

.root--\+Gzni[data-is-bonus='true'] .link--AsvtF {
    max-height: none;
    max-height: initial;
}

.textWrapper--8JzM1 {
    min-height: 390px;
    z-index: 1;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 15px
}

@media (min-width: 768px) {

.textWrapper--8JzM1 {
        padding: 30px;
        max-width: 330px;
        min-height: 238px
}
    }

@media (min-width: 768px) and (max-width: 991px) {

.textWrapper--8JzM1 {
        max-width: 270px
}
    }

@media (max-width: 359px) {

.root--\+Gzni[data-is-bonus='false'] .textWrapper--8JzM1 {
        position: absolute;
        bottom: 0;
        left: 0;
        min-height: 375px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box
}
    }

.title--BBrEU {
    margin: 0 0 7px;
    font-weight: normal;
    font: var(--body-small);
    opacity: 0.8;
    letter-spacing: 1px;
    text-transform: uppercase
}

@media (min-width: 768px) {

.title--BBrEU {
        margin-bottom: 5px
}
    }

.root--\+Gzni[data-is-bonus='true'] .title--BBrEU {
    opacity: 1;
}

.subtitle--v4JtE {
    font-weight: 600;
    font: var(--heading-three);
    margin: 0 0 auto
}

@media (min-width: 768px) {

.subtitle--v4JtE {
        font-size: 24px;
        line-height: 30px
}
    }

.root--\+Gzni[data-is-bonus='true'] .image--UwsfF {
    border-radius: 10px;
    margin: 20px auto;
    max-width: 500px;
    width: 100%
}

@media (min-width: 768px) {

.root--\+Gzni[data-is-bonus='true'] .image--UwsfF {
        position: absolute;
        width: 270px;
        height: 270px;
        bottom: 15px;
        right: 15px;
        margin: 0
}
    }

.root--\+Gzni[data-is-bonus='false'] .image--UwsfF {
    width: 100%;
    border-radius: 10px;
    -o-object-fit: contain;
       object-fit: contain;
    z-index: -1;
    position: absolute;
    left: 0;
    bottom: 0

    /*
    Согласованный с дизайнером брейкпоинт: не смогли придумать
    нормальное позиционирование, чтоб всегда текст был виден на
    фоне картинки и картинка не обрезалась блоком там, где это "некрасиво"
   */
}

@media (min-width: 450px) {

.root--\+Gzni[data-is-bonus='false'] .image--UwsfF {
        bottom: 50%;
        -webkit-transform: translate(0, 50%);
                transform: translate(0, 50%)
}
    }

@media (min-width: 768px) {

.root--\+Gzni[data-is-bonus='false'] .image--UwsfF {
        border-radius: 0;
        border-radius: initial;
        bottom: 0;
        right: 0;
        -webkit-transform: initial;
                transform: none;
                transform: initial;
        left: auto;
        width: 370px;
        height: 484px
}
    }

.arrowTextWrapper--W8A8F {
    color: rgb(var(--surface-on-secondary));
}

.courseDetailsWrapper--U\+uo2 {
    opacity: 0.8;
}

@media (hover: hover) {
    .root--\+Gzni:hover .arrowTextWrapper--W8A8F a {
        color: rgb(var(--surface-on-hover));
    }

    .root--\+Gzni[data-is-bonus='false']:hover .subtitle--v4JtE {
        color: rgb(var(--surface-on-hover));
    }
}

.root--gLwit {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

@media (min-width: 992px) {

.root--gLwit[data-size='m'] {
        grid-gap: 25px 20px;
        grid-template-columns: 1fr 1fr
}
    }

@media (min-width: 768px) {

.root--gLwit[data-size='l'] {
        grid-gap: 20px 30px;
        grid-template-columns: 1fr 1fr
}
    }

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--0ME2H, .h1--EqCOD {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--0ME2H, .h1--EqCOD {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two---BqOH, .h2--BSbtX, .caption--\+um9X {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two---BqOH, .h2--BSbtX, .caption--\+um9X {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--ESwpj, .h3--bytI1 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--ektOy, .h4--DiNGz {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--ektOy, .h4--DiNGz {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--jjuiZ, .h5--tYgpi {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--smtEV, .h6--CnlJr {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--smtEV, .h6--CnlJr {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.group--C9x\+1 {
    margin-top: 40px;
    padding: 0
}

@media (min-width: 768px) {

.group--C9x\+1 {
        margin-top: 50px
}
    }

.caption--\+um9X {

    margin: 0 0 19px;
    padding: 0;
    color: rgb(var(--surface-on-primary));
}

.popoverContent--McEI5 {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    border-radius: 8px;
    width: 450px;
    max-width: calc(100vw - 10px);
    z-index: 9999;
    padding: 15px;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Breakpoints */
:root {
    /* Fonts */
    --grotesque-font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --grotesque-font: Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range */
    /* Потому что в Чаптер нету знака рубля и поэтому первым используем шрифт, */
    /* в котором есть только 1 знак рубля, остальной текст берётся из Чаптера */
    --serif-font: Rouble, Charter, Georgia, 'Times New Roman', Times, serif;
    --ruble-sans-font: 'Ruble Sans';
    --ruble-serif-font: 'Ruble Serif';

    /* Font weight */
    --fontWeightBold: 600;

    /* Colors */
    --colorBlack: #000000;
    --colorWhite: #ffffff;
    --colorLink: #2e2ee5;
    --colorLinkHover: #bd1d00;
    --colorLinkHoverDark: #2424b2;
    --colorTinkoffYellow: #ffdf2e;
    --colorLightGray: #f8f8f8;
    --color-popover-text-default: var(--colorWhite);
    --color-input-error: #eb1000;
    --color-urania-background: #12151c;

    /* Sizes */
    --contentMaxWidth: 1220px;
    --contentLaptopWidth: 966px;
    --contentTabletWidth: 700px;
    --showcaseContentMaxWidth: 910px;
    --bodyMobilePaddingUrania: 20px;
    --bodyTabletPaddingUrania: 30px;

    /* z-index */
    --headerZIndex: 2000;

    /* URANIA */
    --transition-duration-default: 0.1s;
    --transition-duration-hover: 0.25s;
    --urania-max-content-width: 760px;
}
.popoverContent--o9nMk {
    font-size: 13px;
    line-height: 15px;
    color: #ffffff;
    color: var(--color-popover-text-default)
}
@media (min-width: 768px) {
.popoverContent--o9nMk {
        position: relative

        /* Добавляем псевдоэлемент размерами больше родителя,
     чтобы когда пользователь вел курсор от бейджика к поповеру,
      поповер не моргал и не исчезал */
}
        .popoverContent--o9nMk::before {
            content: '';
            display: block;
            position: absolute;
            left: -10px;
            right: -10px;
            top: -20px;
            bottom: -10px;
        }
    }
.popoverText--BTlah {
    position: relative;
    z-index: 1;
}

.subscribedText--6CRKl {
    margin: 0;
    color: var(--colorBlack);
}

.changeEmailLink--v6atB {
    margin-top: -1px;
    padding: 0 4px 0 0;
    cursor: pointer;
    border: none;
    font: inherit;
    outline: none;
    background: transparent;
}

.pencilIcon--hrHdx {
    position: relative;
    left: 3px;
    top: 2px;
}

.root--A5z21 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    cursor: pointer;
    outline: 0;
    padding: 4px 14px;
    margin-top: 10px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font: var(--interface-caption);
    text-align: center;
    background-color: transparent;
    border: 1px solid rgb(var(--button-tertiary));
    color: rgb(var(--surface-on-primary));
    border-radius: 60px;
    text-decoration: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.popoverContent--fDtLq {
    width: 230px;
    font-size: 13px;
    line-height: 15px;
    color: var(--colorBlack);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    padding: 10px 10px 8px;
}

.popoverContent--fDtLq a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    padding-bottom: 0;
}

@media (hover: hover) {
    .root--A5z21:hover {
        border-color: rgb(var(--button-tertiary-hover));
    }

    .popoverContent--fDtLq a:hover {
        color: rgba(0, 0, 0, 0.7);
    }
}

.card--ECmd- {
    border-radius: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: opacity 140ms ease-in;
    transition: opacity 140ms ease-in;
    width: 100%;
}

.cardData--JUwTw {
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 250px;
}

.cardImage--PbCN1 {
    padding: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    border-radius: 15px;
    width: 80px;
    height: 80px;
    margin: 0 15px 0 0
}

@media (min-width: 768px) {

.cardImage--PbCN1 {
        width: 95px;
        height: 95px;
        margin: 0 20px 0 0
}
    }

.cardImagePlaceholder--lDbN5 {
    background-color: rgb(var(--surface-primary));
}

.title--Zhn4i {
    max-width: 250px;
    margin: 0;
    font-size: 17px;
    line-height: 20px;
    font-weight: normal;
    color: var(--colorWhite);
    -webkit-transition: opacity 140ms ease-in;
    transition: opacity 140ms ease-in
}

@media (min-width: 768px) {

.title--Zhn4i {
        max-width: 245px
}
    }

.card--ECmd-[data-disabled='true'] {
    cursor: auto;
    cursor: initial;
}

.card--ECmd-[data-disabled='true'] .title--Zhn4i {
    color: var(--surface-on-disabled);
}

.soon--ZqzQq {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    height: 49px;
    opacity: 0.6;
    margin: 20px 15px
}

@media (min-width: 768px) {

.soon--ZqzQq {
        margin: 20px
}
    }

@media (hover: hover) {
    .card--ECmd-[data-disabled='false']:hover .title--Zhn4i {
        color: rgb(var(--surface-on-hover));
    }
}

.bannerWrapper--ld-tu {
    margin: 0 -20px;
    padding: 0 var(--bodyMobilePaddingUrania);
    overflow: hidden
}

@media (min-width: 768px) {

.bannerWrapper--ld-tu {
        margin: 0;
        padding: 0;
        overflow: visible;
        overflow: initial
}
    }

.bannerLink--jtYe3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: var(--promo-banner-background-color);
    color: var(--promo-banner-text-color);
    border-radius: 10px;
    padding: 15px 0 12px;
    height: 100%;
    position: relative;
    text-decoration: none
}

@media (min-width: 768px) {

.bannerLink--jtYe3 {
        padding: 30px 30px 28px;
        height: 242px
}
    }

.label--KHjyL {
    font: var(--body-small);
    margin: 3px 15px 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--promo-banner-label-color)
}

@media (min-width: 768px) {

.label--KHjyL {
        margin: 3px 0 5px
}
    }

.text--vKdiS {
    margin: 0 15px;
    font: var(--heading-three);
    font-weight: var(--fontWeightBold)
}

@media (min-width: 768px) {

.text--vKdiS {
        margin: 0;
        width: 345px;
        font-size: 28px;
        line-height: 33px
}
    }

.footerWrapper--CIeHj {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin: auto 10px 0;
    font: var(--body-medium)
}

@media (min-width: 768px) {

.footerWrapper--CIeHj {
        margin: auto 0 0
}
    }

.captionPicture--xWS0e {
    display: block;
    width: 26px;
    height: 26px;
    margin-right: 5px
}

@media (min-width: 768px) {

.captionPicture--xWS0e {
        position: relative;
        left: -4px;
        width: 46px;
        height: 46px;
        margin-right: 0
}
    }

.picture--kUWt- {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 269px;
    height: 269px;
    margin: 20px 0 9px
}

@media (min-width: 359px) {

.picture--kUWt- {
        width: 473px;
        height: 473px
}
    }

@media (min-width: 768px) {

.picture--kUWt- {
        position: absolute;
        left: auto;
        -webkit-transform: none;
                transform: none;
        right: -40px;
        top: -40px;
        width: 380px;
        height: 380px;
        margin: 0
}
    }

@media (min-width: 768px) {
    .caption--ur4P4 {
        width: 155px;
    }
}

@media (hover: hover) {
    a.bannerLink--jtYe3:hover {
        color: var(--promo-banner-hover-text-color);
        background-color: var(--promo-banner-hover-background-color);
    }

    a.bannerLink--jtYe3:hover .label--KHjyL {
        color: var(--promo-banner-hover-text-color);
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.title--aAHWW {
    font: bold 32px/35px Graphik;
    font: var(--title-mobile)
}

@media (min-width: 760px) {

.title--aAHWW {
        font: bold 45px/50px Graphik;
        font: var(--title-desktop)
}
    }

.subtitle--j5GAI, .bannerSubtitle--5UX96 {
    font: 24px/30px Graphik;
    font: var(--subtitle-mobile)
}

@media (min-width: 760px) {

.subtitle--j5GAI, .bannerSubtitle--5UX96 {
        font: 30px/35px Graphik;
        font: var(--subtitle-desktop)
}
    }

.interface-heading-one--7CkRA {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--7CkRA {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--Z\+7\+z {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--MN24a, .getCourse--M5ov9 {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--8GqkR {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--8GqkR {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--cAQa\+ {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--4ls6C {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--4ls6C {
        font: var(--interface-heading)
}
    }

.root--AtT1d {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 1198px;
    margin: 70px -20px 60px;
    padding-bottom: 19px;
    color: rgb(var(--surface-on-primary));
    background-color: rgb(var(--surface-primary));
    border: 1px solid rgb(var(--border-surface));
    border-radius: 15px;
    text-decoration: none;
    overflow: hidden
}

@media (min-width: 768px) {

.root--AtT1d {
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        min-height: 380px;
        width: calc(100vw - 2 * var(--bodyTabletPaddingUrania));
        margin: 70px auto 60px;
        padding-bottom: 18px
}
    }

.timeLeft--F9-KR {
    font: 17px/25px Graphik;
    font: var(--body-large);
    -webkit-font-feature-settings: 'tnum' on, 'lnum' on;
            font-feature-settings: 'tnum' on, 'lnum' on;
    color: rgb(var(--surface-on-secondary));
}

.rightColumn--EpZBc {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column
}

@media (min-width: 768px) {

.rightColumn--EpZBc {
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
            -ms-flex-align: end;
                align-items: flex-end;
        min-width: 300px;
        padding-top: 11px;
        margin: auto 0 9px auto
}
    }

.bannerSubtitle--5UX96 {

    display: inline-block;
    margin-bottom: 19px
}

@media (min-width: 768px) {

.bannerSubtitle--5UX96 {
        max-width: 560px;
        margin-bottom: 0;
        padding-right: 50px
}
    }

.footer--iPiEM {
    margin-top: auto;
    padding: 0 19px
}

@media (min-width: 768px) {

.footer--iPiEM {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: 0 29px
}
    }

.getCourse--M5ov9 {

    margin-top: 10px;
    padding: 15px 25px;
    border-radius: 10px;
    background-color: rgb(var(--button-secondary));
    text-align: center;
}

.image--7bxHU {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: block;
    margin-top: 1px;
    width: 156%
}

@media (min-width: 768px) {

.image--7bxHU {
        width: 1200px;
        margin-top: 2px
}
    }

@media (hover: hover) {
    .root--AtT1d:hover {
        border-color: rgb(var(--border-hover));
    }

    .root--AtT1d:hover .getCourse--M5ov9 {
        background-color: rgb(var(--button-secondary-hover));
    }
}

.root--F6\+yY {
    max-width: var(--urania-max-content-width);
    margin: 2px auto 0;
    color: var(--colorWhite)
}

@media (min-width: 768px) {

.root--F6\+yY {
        margin-top: 0
}
    }

.subscriptionBox--qi3RP {
    margin: 80px 0 0
}

@media (min-width: 768px) {

.subscriptionBox--qi3RP {
        margin-top: 100px
}
    }

.bannerWrapper--TD3YS {
    margin: 40px auto
}

@media (min-width: 768px) {

.bannerWrapper--TD3YS {
        margin: 50px auto
}
    }

.root--QQxKu {
    position: relative;
}

.root--QQxKu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        122.19deg,
        #f042ff 27.36%,
        #8a3cff 40.4%,
        #f042ff 48.44%,
        #6835f7 56.05%,
        #9c3dff 63.58%,
        #cd40ff 72.3%,
        #2929e7 81.26%
    );
    opacity: 0.3;
    border-radius: 50%;
    -webkit-filter: blur(150px);
            filter: blur(150px);
}

.diplomaLink--3QnVd {
    display: block;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
    margin: 0 9px
}

@media (min-width: 768px) {

.diplomaLink--3QnVd {
        margin: 0 130px
}
    }

.diplomaImg--r5Xoj {
    position: relative;
    top: -10px;
    width: 100%;
    border-radius: 15px;
    -webkit-transition: 0.3s -webkit-transform;
    transition: 0.3s -webkit-transform;
    transition: 0.3s transform;
    transition: 0.3s transform, 0.3s -webkit-transform
}

@media (min-width: 768px) {

.diplomaImg--r5Xoj {
        top: 0
}
    }

@media (hover: hover) {
    .diplomaLink--3QnVd:hover .diplomaImg--r5Xoj {
        -webkit-transform: scale(1.015);
                transform: scale(1.015);
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--WDevq, .h1--Nx9th, .heading--304Xa[data-level='1'] {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--WDevq, .h1--Nx9th, .heading--304Xa[data-level='1'] {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--sC71-, .h2--LKIrD, .heading--304Xa[data-level='2'] {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--sC71-, .h2--LKIrD, .heading--304Xa[data-level='2'] {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--8f\+0B, .h3--nY\+-R, .heading--304Xa[data-level='3'] {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--TB-zF, .h4--6ESxR, .heading--304Xa[data-level='4'] {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--TB-zF, .h4--6ESxR, .heading--304Xa[data-level='4'] {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--E1L54, .h5--nz2YU, .heading--304Xa[data-level='5'] {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six---zPAp, .h6--DGxeq, .heading--304Xa[data-level='6'] {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six---zPAp, .h6--DGxeq, .heading--304Xa[data-level='6'] {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.heading--304Xa {
    margin: 0;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.interface-heading-one--9taZj {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--9taZj {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--P95y3, .content--Qo-O4 {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--HeNGu {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--CZ2mf {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--CZ2mf {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--ihjg0 {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--WHQdn {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--WHQdn {
        font: var(--interface-heading)
}
    }

.body-primary--KXoHm {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}

@media (min-width: 760px) {

.body-primary--KXoHm {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }

.body-secondary--JW9St, .description--493mW {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}

@media (min-width: 760px) {

.body-secondary--JW9St, .description--493mW {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }

.body-large--Rj\+4Y {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.body-large-bold--nXynE {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body-medium--Z1VZ5 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}

.body-medium-bold--h9eTy {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}

.body-small--6wDIs {
    font: 13px/15px Graphik;
    font: var(--body-small);
}

.body-small-bold--b7gCT {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}

:root {
    --modal-index: 2001;
}

.modal--YbzNX {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2001;
    z-index: var(--modal-index);
}

.modal--YbzNX[data-fixed-on-top='true'] {
    -webkit-box-align: start;
    -webkit-align-items: start;
        -ms-flex-align: start;
            align-items: start;
}

.modal--YbzNX[data-placement='bottom-left'], .modal--YbzNX[data-placement='bottom-right'] {
    display: block;
    position: fixed;
    top: auto;
    top: initial;
    height: auto;
    overflow: visible;
    overflow: initial;
    max-height: 100%;
    width: auto;
    width: initial;
    margin: 0;
}

.modal--YbzNX[data-placement='bottom-left'] {
    right: auto;
    right: initial
}

@media (min-width: 760px) {

.modal--YbzNX[data-placement='bottom-left'] {
        margin: 0 0 20px 20px
}
    }

.modal--YbzNX[data-placement='bottom-right'] {
    left: auto;
    left: initial
}

@media (min-width: 760px) {

.modal--YbzNX[data-placement='bottom-right'] {
        margin: 0 20px 20px 0
}
    }

.overlay--BcXJv {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, var(--opacity-surface-top));
}

.close--og2p4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    background: none;
    cursor: pointer;
    outline: none;
}

.close--og2p4 > svg {
    fill: rgba(var(--surface-on-primary), 0.5);
}

.close--og2p4:hover > svg {
    fill: rgba(var(--surface-on-primary), 1);
}

.close--og2p4[data-is-blurred='true'] {
    background: rgba(var(--surface-primary), 0.7);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 50%;
}

.content--Qo-O4 {
    max-width: 95%;
    width: 400px;
    min-height: 200px;
    padding: 0 20px;
    background-color: rgb(var(--surface-primary));
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: rgb(var(--surface-on-secondary));
}

.modal--YbzNX[data-has-vertical-padding='true'] .content--Qo-O4 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.modal--YbzNX[data-placement='bottom-left'] .content--Qo-O4, .modal--YbzNX[data-placement='bottom-right'] .content--Qo-O4 {
    color: rgb(var(--surface-on-primary));
    -webkit-box-shadow: 0 4px 5px rgba(var(--surface-on-static), 0.15);
            box-shadow: 0 4px 5px rgba(var(--surface-on-static), 0.15);
    border: 1px solid rgb(var(--border-surface));
    padding: 20px 30px 20px 20px;
    border-radius: 15px 15px 0 0;
    max-width: 100%;
    width: auto
}

@media (min-width: 760px) {

.modal--YbzNX[data-placement='bottom-left'] .content--Qo-O4, .modal--YbzNX[data-placement='bottom-right'] .content--Qo-O4 {
        max-width: 375px;
        padding: 25px 30px;
        border-radius: 15px
}
    }

.title--UorTd {
    color: rgb(var(--surface-on-primary));
    word-wrap: anywhere;
    max-width: 295px;
}

.description--493mW {
    margin: 5px 0 0;
    word-wrap: anywhere;
}

@media (min-width: 760px) {
    .content--Qo-O4 {
        padding: 0 30px;
    }

    .modal--YbzNX[data-has-vertical-padding='true'] .content--Qo-O4 {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .title--UorTd {
        max-width: 320px;
    }

    .description--493mW {
        margin: 10px 0 0;
    }
}

.scrollBarDisableWithOverlay--GKNdg::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0.3);
}

.scrollBarDisable--KqABA::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.3);
}

.tj-light-theme {
    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 247, 247, 247;
    --background-secondary: 255, 255, 255;

    /* Цвета поверхностей */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-accent: 26, 26, 26;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 232, 236, 255;
    --surface-interactive-hover: 220, 224, 242;

    --surface-positive: 239, 249, 242;
    --surface-positive-hover: 227, 237, 230;

    --surface-warning: 253, 247, 242;
    --surface-warning-hover: 240, 235, 230;

    --surface-negative: 254, 243, 242;
    --surface-negative-hover: 241, 231, 230;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));
    --surface-hover: 242, 242, 242;

    /* Цвета текста */

    --surface-on-primary: 0, 0, 0;
    --surface-on-secondary: 0, 0, 0;
    --surface-on-interactive: 20, 20, 204;
    --surface-on-positive: 2, 131, 35;
    --surface-on-warning: 209, 70, 0;
    --surface-on-negative: 235, 16, 0;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет.
    И хотя в светлой теме черный остается черным, пишем по аналогии */
    --surface-on-disabled: rgba(0, 0, 0, var(--opacity-surface-on-disabled));
    --surface-on-initial: 166, 166, 166;
    --surface-on-placeholder: 128, 128, 128;
    --surface-on-hover: 77, 77, 77;

    /* Интерактивные элементы */

    --interactive-accent: 46, 46, 229;
    --interactive-accent-hover: 0, 0, 178;

    --interactive-positive: 77, 153, 108;
    --interactive-positive-hover: 20, 102, 48;

    --interactive-negative: 242, 69, 53;
    --interactive-negative-hover: 189, 30, 19;

    --interactive-warning: 204, 123, 82;
    --interactive-warning-hover: 153, 71, 31;

    --interactive-additional: 0, 206, 51;
    --interactive-additional-hover: 43, 217, 87;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 0, 0, 0;

    /* Бордеры */

    --border-surface: 237, 237, 237;
    --border-separator: 229, 229, 229;
    --border-initial: 204, 204, 204;
    --border-hover: 179, 179, 179;
    --border-focus: 138, 138, 229;

    --border-interactive-positive: 49, 155, 76;
    --border-interactive-positive-disabled: 2, 131, 35;
    --border-interactive-positive-hover: 31, 102, 48;

    --border-interactive-warning: 209, 70, 0;
    --border-interactive-warning-disabled: 209, 70, 0;
    --border-interactive-warning-hover: 128, 53, 0;

    --border-interactive-negative: 239, 61, 48;
    --border-interactive-negative-disabled: 235, 16, 0;
    --border-interactive-negative-hover: 153, 25, 15;

    /* Иконки и элементы управления */

    --control-initial: 128, 128, 128;
    --control-hover: 77, 77, 77;

    /* Кнопки */

    --button-primary: 51, 51, 51;
    --button-primary-hover: 3, 3, 3;

    --button-secondary: 234, 234, 234;
    --button-secondary-hover: 219, 219, 219;

    --button-tertiary: 179, 179, 179;
    --button-tertiary-hover: 77, 77, 77;

    --color-neutral-primary-on: white;
    --color-neutral-primary-on-inverted: black;

    /* Цвета для выделения в тексте */

    --color-highlight: #ffeea4;
    --color-highlight-on: #000000;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/bwHohqLTCYoIk1rMAtRj2ujo/%D0%A2%E2%80%93%E2%80%93%D0%96-%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=273%3A84&viewport=-3710%2C2256%2C0.7162620425224304 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.02;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.1;

    --opacity-meta-initial: 0.3;
    --opacity-meta-hover: 0.7;

    --opacity-control-disabled: 0.2;
}

.imageWrapper--cwO8e {
    position: relative;
    top: -2px;
    width: calc(100% + 40px);
    margin: 0 -20px 18px;
    min-height: 140px
}
@media (min-width: 768px) {
    .imageWrapper--cwO8e {
        width: calc(100% + 60px);
        margin: 0 -30px 19px;
        height: 200px
}
    }

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.interface-heading-one--H-qdF {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}
@media (min-width: 760px) {
.interface-heading-one--H-qdF {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }
.interface-primary--282SK {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}
.interface-secondary--bvzLu, .input--g00wz {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}
.interface-error--VXSs7, .error--VThP\+, .message--qHl8S {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}
@media (min-width: 760px) {
.interface-error--VXSs7, .error--VThP\+, .message--qHl8S {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }
.interface-caption--1mxyo, .caption--RjueI {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}
.interface-heading--3NQch {
    font: var(--interface-heading-mobile)
}
@media (min-width: 760px) {
.interface-heading--3NQch {
        font: var(--interface-heading)
}
    }
.wrapper--98Q1Z {
    width: 100%;
}
.wrapper--98Q1Z + .wrapper--98Q1Z {
    margin-top: 15px;
}
@media (min-width: 760px) {
    .wrapper--98Q1Z {
        width: 220px;
        display: inline-block;
    }

    .wrapper--98Q1Z + .wrapper--98Q1Z {
        margin-top: 0;
        margin-left: 20px;
    }
}
.wrapper--98Q1Z[data-fullsize='true'] {
    width: 100%;
}
/* Примешиваем нужные стили текста из typography.interface.module */
/* с помощью postcss-extend */
.caption--RjueI {
    color: rgb(var(--surface-on-placeholder));
    margin-bottom: 5px;
}
.input--g00wz {
    color: rgb(var(--surface-on-primary));
    background: rgb(var(--background-secondary));
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 10px 15px;
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    height: 50px;
    outline: none;
    -webkit-user-select: auto; /* сафари check */
    border: 1px solid rgb(var(--border-medium none currentColor));
    border: 1px solid rgb(var(--border-initial));
    border-radius: 10px;
}
input::-webkit-input-placeholder, input::-moz-placeholder, input:-ms-input-placeholder {
    color: rgb(var(--surface-on-placeholder));
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover */
/* https://caniuse.com/#feat=css-media-interaction */
@media (hover: hover) {
    .input--g00wz:hover {
        border-color: rgb(var(--border-hover));
    }
}
input:focus::-webkit-input-placeholder, input:focus::-moz-placeholder, input:focus:-ms-input-placeholder {
    color: transparent;
}
.input--g00wz[data-status='error'] {
    border-color: rgb(var(--border-interactive-negative));
}
.input--g00wz[data-status='warning'] {
    border-color: rgb(var(--border-interactive-warning));
}
.input--g00wz[data-status='success'] {
    border-color: rgb(var(--border-interactive-positive));
}
@media (hover: hover) {
    .input--g00wz[data-status='error']:not(:disabled):not(:focus):hover {
        border-color: rgb(var(--border-interactive-negative-hover));
    }

    .input--g00wz[data-status='warning']:not(:disabled):not(:focus):hover {
        border-color: rgb(var(--border-interactive-warning-hover));
    }

    .input--g00wz[data-status='success']:not(:disabled):not(:focus):hover {
        border-color: rgb(var(--border-interactive-positive-hover));
    }
}
.input--g00wz:disabled {
    color: var(--surface-on-disabled);
    background-color: var(--surface-disabled);
    border-color: rgba(var(--surface-on-primary), var(--opacity-border-disabled));
}
/* Фокус должен быть в конце, чтобы перебить цвета статусов */
/* каскадом, специфичность равна, hover пишем чтобы также догнать специфичность */
.input--g00wz:focus, .input--g00wz:focus:hover {
    border: 2px solid rgb(var(--border-focus));

    /* Так как бордер при фокусе увеличивается на 1px, то размер инпута необходимо компенсировать, уменьшив паддинги на 1px */
    /* иначе контент внутри сжимается во время фокуса */
    padding: 9px 14px;
}
/* Тонкий инпут */
/* Он наследует паддинг обычного инпута, поэтому мы используем свой, сбросив сначала паддинг */
.input--g00wz[data-size='thin'] {
    background: none;
    height: 25px;
    border-radius: 0;
    padding: 0;
    padding-bottom: 4px;
    border-top: none;
    border-left: none;
    border-right: none;
}
.input--g00wz[data-size='thin']:focus, .input--g00wz[data-size='thin']:focus:hover {
    /* Тонкий инпут перенимает стили фокуса обычного инпута, если данный блок стиля не указать */
    /* Поэтому для него нам надо явно указать что при фокусе мы используем только нижнюю границу */
    /* И используем свой паддинг */
    border: none;
    border-bottom: 2px solid rgb(var(--border-focus));
    padding: 0;
    padding-bottom: 3px;
}
.error--VThP\+ {
    color: rgb(var(--surface-on-negative));
    margin-top: 5px;
}
.message--qHl8S {
    color: rgb(var(--surface-on-placeholder));
    margin-top: 5px;
}
.message--qHl8S[data-status='success'] {
    color: rgb(var(--surface-on-positive));
}
.message--qHl8S[data-status='error'] {
    color: rgb(var(--surface-on-negative));
}
.input--g00wz[data-placeholder-position='left']::-webkit-input-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']::-moz-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']:-ms-input-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']::-ms-input-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']::placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='center']::-webkit-input-placeholder {
    text-align: center;
}
.input--g00wz[data-placeholder-position='center']::-moz-placeholder {
    text-align: center;
}
.input--g00wz[data-placeholder-position='center']:-ms-input-placeholder {
    text-align: center;
}
.input--g00wz[data-placeholder-position='center']::-ms-input-placeholder {
    text-align: center;
}
.input--g00wz[data-placeholder-position='center']::placeholder {
    text-align: center;
}
.input--g00wz[data-placeholder-position='right']::-webkit-input-placeholder {
    text-align: right;
}
.input--g00wz[data-placeholder-position='right']::-moz-placeholder {
    text-align: right;
}
.input--g00wz[data-placeholder-position='right']:-ms-input-placeholder {
    text-align: right;
}
.input--g00wz[data-placeholder-position='right']::-ms-input-placeholder {
    text-align: right;
}
.input--g00wz[data-placeholder-position='right']::placeholder {
    text-align: right;
}
.input--g00wz[data-placeholder-position='left']:focus::-webkit-input-placeholder, .input--g00wz[data-placeholder-position='center']:focus::-webkit-input-placeholder, .input--g00wz[data-placeholder-position='right']:focus::-webkit-input-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']:focus::-moz-placeholder, .input--g00wz[data-placeholder-position='center']:focus::-moz-placeholder, .input--g00wz[data-placeholder-position='right']:focus::-moz-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']:focus:-ms-input-placeholder, .input--g00wz[data-placeholder-position='center']:focus:-ms-input-placeholder, .input--g00wz[data-placeholder-position='right']:focus:-ms-input-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']:focus::-ms-input-placeholder, .input--g00wz[data-placeholder-position='center']:focus::-ms-input-placeholder, .input--g00wz[data-placeholder-position='right']:focus::-ms-input-placeholder {
    text-align: left;
}
.input--g00wz[data-placeholder-position='left']:focus::placeholder, .input--g00wz[data-placeholder-position='center']:focus::placeholder, .input--g00wz[data-placeholder-position='right']:focus::placeholder {
    text-align: left;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.tj-light-theme {
    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 247, 247, 247;
    --background-secondary: 255, 255, 255;

    /* Цвета поверхностей */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-accent: 26, 26, 26;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 232, 236, 255;
    --surface-interactive-hover: 220, 224, 242;

    --surface-positive: 239, 249, 242;
    --surface-positive-hover: 227, 237, 230;

    --surface-warning: 253, 247, 242;
    --surface-warning-hover: 240, 235, 230;

    --surface-negative: 254, 243, 242;
    --surface-negative-hover: 241, 231, 230;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));
    --surface-hover: 242, 242, 242;

    /* Цвета текста */

    --surface-on-primary: 0, 0, 0;
    --surface-on-secondary: 0, 0, 0;
    --surface-on-interactive: 20, 20, 204;
    --surface-on-positive: 2, 131, 35;
    --surface-on-warning: 209, 70, 0;
    --surface-on-negative: 235, 16, 0;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет.
    И хотя в светлой теме черный остается черным, пишем по аналогии */
    --surface-on-disabled: rgba(0, 0, 0, var(--opacity-surface-on-disabled));
    --surface-on-initial: 166, 166, 166;
    --surface-on-placeholder: 128, 128, 128;
    --surface-on-hover: 77, 77, 77;

    /* Интерактивные элементы */

    --interactive-accent: 46, 46, 229;
    --interactive-accent-hover: 0, 0, 178;

    --interactive-positive: 77, 153, 108;
    --interactive-positive-hover: 20, 102, 48;

    --interactive-negative: 242, 69, 53;
    --interactive-negative-hover: 189, 30, 19;

    --interactive-warning: 204, 123, 82;
    --interactive-warning-hover: 153, 71, 31;

    --interactive-additional: 0, 206, 51;
    --interactive-additional-hover: 43, 217, 87;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 0, 0, 0;

    /* Бордеры */

    --border-surface: 237, 237, 237;
    --border-separator: 229, 229, 229;
    --border-initial: 204, 204, 204;
    --border-hover: 179, 179, 179;
    --border-focus: 138, 138, 229;

    --border-interactive-positive: 49, 155, 76;
    --border-interactive-positive-disabled: 2, 131, 35;
    --border-interactive-positive-hover: 31, 102, 48;

    --border-interactive-warning: 209, 70, 0;
    --border-interactive-warning-disabled: 209, 70, 0;
    --border-interactive-warning-hover: 128, 53, 0;

    --border-interactive-negative: 239, 61, 48;
    --border-interactive-negative-disabled: 235, 16, 0;
    --border-interactive-negative-hover: 153, 25, 15;

    /* Иконки и элементы управления */

    --control-initial: 128, 128, 128;
    --control-hover: 77, 77, 77;

    /* Кнопки */

    --button-primary: 51, 51, 51;
    --button-primary-hover: 3, 3, 3;

    --button-secondary: 234, 234, 234;
    --button-secondary-hover: 219, 219, 219;

    --button-tertiary: 179, 179, 179;
    --button-tertiary-hover: 77, 77, 77;

    --color-neutral-primary-on: white;
    --color-neutral-primary-on-inverted: black;

    /* Цвета для выделения в тексте */

    --color-highlight: #ffeea4;
    --color-highlight-on: #000000;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/bwHohqLTCYoIk1rMAtRj2ujo/%D0%A2%E2%80%93%E2%80%93%D0%96-%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=273%3A84&viewport=-3710%2C2256%2C0.7162620425224304 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.02;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.1;

    --opacity-meta-initial: 0.3;
    --opacity-meta-hover: 0.7;

    --opacity-control-disabled: 0.2;
}
.tj-dark-theme {
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 18, 21, 28;
    --background-secondary: 18, 21, 28;

    /* Цвета поверхностей */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-accent: 225, 228, 242;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 51, 51, 102;
    --surface-interactive-hover: 62, 62, 117;

    --surface-positive: 41, 68, 51;
    --surface-positive-hover: 62, 87, 71;

    --surface-warning: 65, 56, 50;
    --surface-warning-hover: 84, 76, 71;

    --surface-negative: 65, 45, 50;
    --surface-negative-hover: 84, 66, 71;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));
    --surface-hover: 42, 44, 51;

    /* Цвета текста */

    --surface-on-primary: 255, 255, 255;
    --surface-on-secondary: 208, 208, 210;
    --surface-on-interactive: 178, 189, 255;
    --surface-on-positive: 132, 255, 143;
    --surface-on-warning: 255, 198, 140;
    --surface-on-negative: 255, 140, 140;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет */
    --surface-on-disabled: rgba(255, 255, 255, var(--opacity-surface-on-disabled));
    --surface-on-initial: 113, 114, 119;
    --surface-on-placeholder: 136, 138, 141;
    --surface-on-hover: 231, 232, 232;

    /* Интерактивные элементы */

    --interactive-accent: 82, 82, 204;
    --interactive-accent-hover: 118, 118, 217;

    --interactive-positive: 40, 133, 78;
    --interactive-positive-hover: 99, 153, 121;

    --interactive-negative: 153, 46, 46;
    --interactive-negative-hover: 204, 82, 82;

    --interactive-warning: 153, 92, 61;
    --interactive-warning-hover: 78, 131, 107;

    --interactive-additional: 132, 255, 143;
    --interactive-additional-hover: 134, 191, 149;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 255, 255, 255;

    /* Бордеры */

    --border-surface: 41, 44, 51;
    --border-separator: 62, 65, 70;
    --border-initial: 89, 91, 96;
    --border-hover: 136, 138, 141;
    --border-focus: 130, 139, 187;

    --border-interactive-positive: 109, 208, 120;
    --border-interactive-positive-disabled: 132, 255, 143;
    --border-interactive-positive-hover: 166, 255, 176;

    --border-interactive-warning: 204, 158, 112;
    --border-interactive-warning-disabled: 204, 158, 112;
    --border-interactive-warning-hover: 255, 217, 178;

    --border-interactive-negative: 208, 116, 118;
    --border-interactive-negative-disabled: 255, 140, 140;
    --border-interactive-negative-hover: 255, 166, 168;

    /* Иконки и элементы управления */

    --control-initial: 136, 138, 141;
    --control-hover: 208, 208, 210;

    /* Кнопки */

    --button-primary: 245, 245, 249;
    --button-primary-hover: 255, 255, 255;

    --button-secondary: 54, 57, 63;
    --button-secondary-hover: 65, 68, 73;

    --button-tertiary: 136, 138, 141;
    --button-tertiary-hover: 255, 255, 255;

    --color-neutral-primary-on: black;
    --color-neutral-primary-on-inverted: white;

    /* Цвета для выделения в тексте */

    --color-highlight: #d0d0d2;
    --color-highlight-on: #040406;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/iFuWTdbKPNbKM6TeSUL896/UI-Kit?node-id=2288%3A160 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.03;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.15;

    --opacity-meta-initial: 0.5;
    --opacity-meta-hover: 0.9;

    --opacity-control-disabled: 0.2;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.interface-heading-one--z241X {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}
@media (min-width: 760px) {
.interface-heading-one--z241X {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }
.interface-primary--XvEiC {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}
.interface-secondary--nXRjT, .button--vjFJQ {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}
.interface-error--5HE-U {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}
@media (min-width: 760px) {
.interface-error--5HE-U {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }
.interface-caption--XqAJy, .button--vjFJQ[data-size='small'] {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}
.interface-heading--OmTd6 {
    font: var(--interface-heading-mobile)
}
@media (min-width: 760px) {
.interface-heading--OmTd6 {
        font: var(--interface-heading)
}
    }
/* Базовая кнопка (primary accent): */
.button--vjFJQ {
    /* задаём пропертям дефолтные значения */
    --background-color: var(--interactive-accent);
    --hover: var(--interactive-accent-hover); /* подключаем типографику */
    color: white;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    outline: none;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    /* задаём размеры и отступы */
    width: 100%;
    padding: 15px 25px;
    margin-top: 30px;

    /* это реализация, использующая custom property */
    background-color: rgb(var(--background-color));
}
@media (hover: hover) {
    .button--vjFJQ:hover {
        background-color: rgb(var(--hover));
        cursor: pointer;
    }
}
@media (min-width: 760px) {
    .button--vjFJQ {
        width: auto;
        min-width: 160px;
        margin-top: 40px;
    }
}
.button--vjFJQ[data-size='small'] {

    padding: 5px 15px;
    margin-top: 25px;
    border-radius: 5px;
    width: auto;
}
@media (min-width: 760px) {
    .button--vjFJQ[data-size='small'] {
        min-width: auto;
        margin-top: 35px;
    }
}
/* Для демонстративных целей и случаев, когда кнопка отправится в обёртку */
.button--vjFJQ[data-nomargin='true'] {
    margin: 0;
}
/* Соседство кнопок должно идти после nomagrin стиля */
.button--vjFJQ + .button--vjFJQ {
    margin-top: 10px;
}
@media (min-width: 760px) {
    .button--vjFJQ + .button--vjFJQ {
        margin-left: 10px;
        margin-top: 0;
    }
}
/* Убираем отступ сверху для соседства маленьких кнопок, */
/* потому что они не расползаются на всю ширину, а идут друг за другом */
.button--vjFJQ[data-size='small'] + .button--vjFJQ[data-size='small'] {
    margin-top: 0;
    margin-left: 10px;
}
/* Чтобы избежать дублирования, задаём цвета в разных состояниях переменными */
/* и далее переопределяем только переменные: */
/* https://increment.com/frontend/a-users-guide-to-css-variables/#css-variables-facilitate-style-encapsulation  */
/* а дальше начинам переопределять проперти для разных модификаторов */
/* Акцентные кнопки: */
.button--vjFJQ[data-accent='success'] {
    --background-color: var(--interactive-positive);
    --hover: var(--interactive-positive-hover);
}
.button--vjFJQ[data-accent='warning'] {
    --background-color: var(--interactive-warning);
    --hover: var(--interactive-warning-hover);
}
.button--vjFJQ[data-accent='error'] {
    --background-color: var(--interactive-negative);
    --hover: var(--interactive-negative-hover);
}
/* Нейтральные кнопки */
.button--vjFJQ[data-group='neutral'] {
    color: var(--color-neutral-primary-on);
    background-color: rgb(var(--button-primary));
}
/* модификации */
.button--vjFJQ[data-group='neutral'][data-secondary='true'] {
    color: var(--color-neutral-primary-on-inverted);
    background-color: rgb(var(--button-secondary));
}
/* у третьей нейтральной кнопки нет фона, */
/* вместо этого у нее бордер */
.button--vjFJQ[data-group='neutral'][data-tertiary='true'] {
    color: var(--color-neutral-primary-on-inverted);
    background: none;
    border: 1px solid rgb(var(--button-tertiary));
}
@media (hover: hover) {
    .button--vjFJQ[data-group='neutral']:hover {
        background-color: rgb(var(--button-primary-hover));
    }

    .button--vjFJQ[data-group='neutral'][data-secondary='true']:hover {
        background-color: rgb(var(--button-secondary-hover));
    }

    .button--vjFJQ[data-group='neutral'][data-tertiary='true']:hover {
        border-color: rgb(var(--button-tertiary-hover));
        background: none;
    }
}
/* disabled описываем в конце, чтобы перебить специфичность */
.button--vjFJQ[disabled], .button--vjFJQ[disabled]:hover {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: default;
    opacity: var(--opacity-interactive-disabled);
}
.button--vjFJQ[data-fullsize='true'] {
    width: 100%;
}
.button--vjFJQ[data-only-icon='true'] {
    padding: 0;
    margin: 0;
    min-width: 50px;
    min-height: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.body-primary--KCDoG, .paragraph--YbKz\+ {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}
@media (min-width: 760px) {
.body-primary--KCDoG, .paragraph--YbKz\+ {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }
.body-secondary--RduKs, .paragraph--YbKz\+[data-grade='secondary'] {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}
@media (min-width: 760px) {
.body-secondary--RduKs, .paragraph--YbKz\+[data-grade='secondary'] {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }
.body-large--B8tXW, .paragraph--YbKz\+[data-grade='large'] {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large-bold--JE-QC, .paragraph--YbKz\+[data-grade='large'][data-bold='true'] {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--lKlMO, .paragraph--YbKz\+[data-grade='medium'] {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium-bold--Jf1UJ, .paragraph--YbKz\+[data-grade='medium'][data-bold='true'] {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--TfHuQ, .paragraph--YbKz\+[data-grade='small'] {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small-bold--RuGSV, .paragraph--YbKz\+[data-grade='small'][data-bold='true'] {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
.paragraph--YbKz\+ {
    margin-top: 0;
    margin-bottom: 20px
}
@media (min-width: 760px) {
.paragraph--YbKz\+ {
        margin-bottom: 25px
}
    }
@media (min-width: 820px) {
.paragraph--YbKz\+ {
        padding-right: 20px
}
    }
.paragraph--YbKz\+[data-grade='secondary'] {
    margin-bottom: 10px
}
@media (min-width: 760px) {
.paragraph--YbKz\+[data-grade='secondary'] {
        margin-bottom: 20px
}
    }
.paragraph--YbKz\+[data-grade='large'] {
    margin-bottom: 20px;
}
.paragraph--YbKz\+[data-grade='medium'] {
    margin-bottom: 10px;
}
.paragraph--YbKz\+[data-grade='small'] {
    margin-bottom: 10px;
}
.paragraph--YbKz\+[data-nomargin='true'] {
    margin-bottom: 0;
}
.paragraph--YbKz\+[data-nopadding='true'] {
    padding-right: 0;
}
.paragraph--YbKz\+[data-opacity='true'] {
    opacity: var(--opacity-meta-1);
    opacity: var(--opacity-meta-initial);
}

@-webkit-keyframes rotate--VfLEe {
    from {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes rotate--VfLEe {
    from {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@-webkit-keyframes skeletonAnimate--dXsEQ {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.5;
    }
}

@keyframes skeletonAnimate--dXsEQ {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.5;
    }
}

.loader--XEZF3 {
    background-size: contain;
    width: 20px;
    height: 20px;
    -webkit-animation: 0.5s rotate--VfLEe linear infinite;
            animation: 0.5s rotate--VfLEe linear infinite
}

.loader--XEZF3.blue--sDt5t {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAArmSURBVHgB5VtbbBxXGf7PzOyu92YnTexgx01cyWDs2BuMi4QICEugPiBR+uJIKVBRiUqgtkiEPoJieIAH1DYUIYFEGsELKOkDEtAK8RCDRNRIRG0ce4MlSxhfkjqX+rrrvc05fP85M+v1rbGdm3f8S7PnzDkzZ+b/zn87/5kV9BCovf364UjE/bzrWl04fZwPIahOKcUlSCgmIcQ4TmZxPoH2caXoX6WSmEinG4fpAZOgB0Sp1PUvELlfJbJO4HQPDrBKivssa7mum5UACP45l0LpgoTkkgFSSl4EkO8MDzf9jR4A3VcgOjqmDjmO+KYQ6kUwWlfBULlkAhBMPhgVfaSMhJh2ACQxluCST/k+NE4AyotE8tXBweZJuk90X4Bg0Q+F6Id4yW/oQStmF3UwQtJ7nJ5hlgDLUloWDEgGDMN4eVgPDB8sfY+S0kgKXwdJOYeW1+4HIPcEREvLf/fU1UV+hJd7iTTTevaYeWZcMCCGEV8iNFWoAGmGlpklXyrWURPTt6xWy8Ch4RzK1+8FkG0D0dU19TU8/Ayqdd47q5WqUNm2kiG/3zDMDGngKgHyS/9eT5LMuVERDbwGw2uHgbUARuNbtA3aMhAsBbW1oVO49Xv+C2PqMSnSN3plZlbN7j9xDFqWuFIquVeltGbT6YPjlWN3dk49btulw+irFcI+hqYjGOUY0UqJYamgFWpDPphsiM9kMjWnR0f3zdMWaEtAGFsg/wSGj/ovsMy48GZoxQuDefF7IfJ/ef/9J2ZpG9Taeqc2Fst9Bc88jmE/Z0BXWpIAqlq2P76X0e8CgypPbEVVNg1EZ+dEyrIsiJ14As+yV3Ubsye0zoJh+cbcXPGXY2PbY37jd5h6HOC+gicdN3HHGtui38XYJjEuRPjElSv7pzYz9qaA6Or6oMuy5NsY/TEcDAK0VNjsEfSTvZcAEL/A7P9ku7O/WTKAiB/gyX2Vdoelo0IVuT7vuuLE0FDTtbuNeVcgvIcO4Cl7cQrmBZsqGw+1ULfZdmGY/2EGnr96tfEf9BDJk5DzqDbTKsNKXhwCl8tgPHs3MKyP6kylJpv5QRgxDnRdjF3iAw8o4hwl19Vpy8p/+mGDwDQ0dHAiGq15CtXfskaYVp4YM8F4dyElJQHGr48enTj4UWNtKBFtbbeSoVDhbUjDIZYAMI5wxkgDGQC5/nMYpJ/SDqCursmTkNDv08pYRHprGARilC4Ww18fGalfWO/+DSUiEsm/DEQPYNwiTosYqMh1PITPS65L390pIDBdvdr8Gng+yfWK6FQwccW2qT0SKb680f3rApFKTT2NMZ4F01AFfbAqAAChQUHU/9Lw8ME/0g4jgAF7YZ1UxlxWSHtZbb7V3j715fXuXQNEe/utRhTf9iShYKRAA6DtAwB5FfbgPO1QMpGlOs1149WEjm+NhhCFQuJnrPar71sDRChUfB5FPboKRgLYMEqWigIGfHNw8OAbtMMJkvE6nNsZA4LyVAULIMmSoWrXU5EVQHR2Th9AqPyUAUBVHBZAUOOFwsKvqEookwmfxjtPGqmwSFWsfvD73GovsgIIyyohl6BBKHjqwBLBIBRKpdILIyOfXKAqIbPWUK/4qsErY6F/dFqA48IXK68vA5FKfdCA4osAQKsEfK9nI6iAqPLP16613KAqI3i1d8H72YoImEsGg13/M93dt5r8a8tAKOUeZ9eIG9kosrssGOmgouuGz1KVUiaTheGUWpKNVBgw+NR1S8/415WBQMzwCc9T5FkdSBtHxdLxztDQgWmqUhod/Tgvx88aOyHMurWcI3Kf82saiKNHp7pxUR1Wl+wZ2GVCGkxJlP0DVTlls0tvemkTze9y5lwkjxwZ/wyf6Q64Fc4v8OzDHpAfPzAYVwYHW29SlZMnFZe8xBHDwG5UcKYLS4gv8TWeaugcA6TBZTA81WBQxAAFhsRbfrhtvAbx+gPSYT3NbVZ39zgsp0j4zEM6tG3ARfnp6RvvUUAom838nUsvcyYqPEmirW28CRIR4s0XqAHbA8pzCUko2La8duPGk1kKCLF6gOl3eZm+bCyNvYhE7CctuJBDxigK77CgGuw5QmMUMEI89B8/uGJ7wW3KoNLmEDkJdOShCnAaGi1hDneUAkZYNac5rUpeXEXlBLRqdJBXiNm29hCczdHZHXYzpZK1RAEjbChfs1elnc0GkWhybNsVnloIE4dLi8tiMTJDASPHcef1/CulpcJksXSQlYAqWBHUYBOkFzvYOSlFbqsbJNVAZp9DcOxQkcXSy/RGBzqTNzZBS4QltbF4cJ8LPHpS4FFJnYw3nxxwPCEdb13h+VSNU9nHBpPUAviL+ek73l0Hw/O8NwGJEKwOea4jfii4rsxTQImzbMpbcphtSt5EVn9lGzHLzLOKYMWNBIxYchyRb2ycilEAidN4luX+DiDMQysQZKnfcAZcYBPns1K6SGY6fJ0wXsShXC50caM9gCCSgy36BU7ZYjte715KGdIdiC3iKHYPEOGwzEAiEsZeMgglbUQiERWhXUROoeDMh8NiT0GHVCUVCsGNFNia2g7tIrKi0eYF7BbnbFvkEGjkseDQB9FSuL9fWbRLSKtBd/fMYdfNr2A6n8/hN3e7mlL490Ja/GdmZufCYScejYL1nFKxWJRqamwRiSTCtEtIAxGLZZCAaagpFjMch4tcLsPNqliMhUwEJhQFnLQ6pNOdyEotqng8rtdmQsSUbUf5axPV0TEcp11AZbsgZTaztKSU40Sl43Bak6UiAze6L7q8rR5cKgORTqeXWAIymUXTYcWQ5JTKdTOirW0kQQGnCk9x3I1GF3JCxGEPFjmyhHrEVTbLH98kIz09/w5RgGmFy7x06b0MS0Eux/ZBKnPENDCFQmsiyCqyhjHsiscLhVJNZVs8jrwVJCSXc3KDgx/LUABpTeQ4OHggGwolZG3tcls4nJCLi0rV1JRqmpsnohRAWieEFiocrltcXEwqBiQUcuXc3DzV1UFBAMbevbKmo2MocIHWhjrf0zMVg4pEFhZqVTI5X74OSRwdXBUKmSzHHxQQ2nBRdfly01IsVnD37JkF87WKAQiHk3J+3gARBbW2BmepfhcvoKy2ttvxYnFeA7Z3716am1Nq3z7TOzsrVWPjYnFgoCVf7WH4XZbZQqZSF7L19caVzs3dAbMf0p07H2oQ9u8nunkz7qRS07Fqd62bfHllHTs2gjXHPrp9m8/vQF0eAyj8DUmDvgJhOYKvhdLoaGuhGqVjC7PYb6VS34kmk7Y1M6M0CI6zv8wwvEu5vrQ0U0qnjxSrCRB785cOqOnphNvQ8Cl7elqA2QVKJMwShEG4fp0omeSYQ6qZGUfAyDpNTS9Yvb29WMec3/GAbEOvlcDSPARpCPlSwMxzOTHBKlJSLS1EY2OmbvpbVUMDyfp6UufPl/8DqgejHUL3YOCU3dIyFiqVHNHa2qwZGgP3DMLkpA9AXuk/6tEw3O0R1C9DanrUwAADwN+191V+uyLpEdI9ZKqFOzamZE8PjzFmT062IJdRAsOt6BvVUoDUn8doDnHJQMX/OX0QfozylP+V9CPNhN0nl6ddp93Rwe7Yn30OypjpAX0FTAXV1/fqdqiH6u83d546ZSTB+94tKGlBZuQCJETpo7eXjwtOXx///emc3dd3zjZbBP2WB563C6//PiC4n4JHmjnLHOf0vwENCIbpigv1dQas/qDvo5T/SiTWtvdby1Ly6Oj/P5zUA7wX2p8AAAAASUVORK5CYII=);
    }

.loader--XEZF3.white--Q9HuR {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUDSURBVHgB1VpLiFxFFD2v7UTHxERB8BvNRkbwg2sXip+FohI/SBZiJOBOoxsXgi4U3DvqOoIrIcGNoi6CgojiQhfCmAj5TiaTL8kkmSTTM8l055x+Vd33VVdPujvd09UHDvd19XvVdereqrpVrzP0CbVabT3No+QL5AbyERW765rjOXKKPExOkn+Q/2VZdh59QIbrAAXcSvMi+Qbyxq9zdVbRFFBzt4dltvxPcgdF7cB1oCcxTsS75Dvk+qBhQGujLaumqlCgPCZBOynsCLpE12IoZBvNx4GIWO+3K28n0D4nUdspaDu6QMdiKGIjzXfIx0UsVBq3YnkPVSP3VREXJu9s7tRLpU5uopC3aP4hH3PPZM7a6yyoN0NrZ9my8Dr27D3kj/z9regA1/QMK1JIfRrc2y5cZskfyH/J38lz7NUpU9d9NOLD5OPkQ+S9WD7sPCdY1xfoFfzxD8kLZIW8TFYdl8grjirfRT6BHsDnnie/IY+TRx1nyMPkFHmIPEDuJ99DL+CDH5CnyFnyPHmRXHACvKhfySfRB7CeDa5TJOaIoxd00Aja1m3FW8lpV7F67DR5lpwjL5EnyfcxALDet8k9Tsx0IGYfuZd8JfZsFqnsbuRxr7XkhoBlcoZ8yY6FfkNeQr7e+PFURXMcySqT2MQ2zOAaYn5CPki9gJIRcox8jZVMY8BgOyRkJ/IZLSZoN9vxsn2mFFSwmeZ2csGxQi6Sl8kD5KsrIURwa8vryNcaCQg7/kG2d0vhGX/BL+6g+RJ5T0hkGU2vzKvi0K0rAeehn8lbUPTOEqkE9Rm2aw4oeuZZ8jY0vWL51TCECM5DnwfF3lMS+KYvtGI0xVYcF8z1JCv8FkMEf/9rmr/QzAxsyG2h9yQqF+MWPCWOGh92vMh+hDQwgdb0Rx5aSz6tD94zSi0qEf7GXjmBBMB2yDPeO41ix036UKJXxmjvRzHE5t31L0gLE86GoTauUNOMpUVywX1p15VZ9sbfSAjyjrIQXq4xxQo1jZlxNXwjck9Yj8juR5rYhdY1R4Kekhi/SPowm3fcgzSxG8VZzQu7S2GmMaPGh5utrvfgK4RwEhDkmQck5kbExZxBmtCqb3e2jQ2cxCgtqKC4/S316yyr31BGwEkgtiW/U2K8V2wMdnQ2METYKGpk1Cqwg1685JgywnEjMf9LzGnkjZ+3lq68GeniE/ICcu/4Y9/PFGZ+wQzjMNlQ47iZZGc/hzzT117re20DMhaOI0/96/cZe5A3HMMIQZ5ReqDpOUzgyhgxqMFnkec6fmbwWIURg8RoNruI5pjxi5BCcDVDbREjAi2OmtY0CWjxvILiCchajBD8jCXP2NcQ/uBglbyDEYEXI89UDWGuU15vCqiLYajJG9Y7VXNddrvR5GEXRq389lwKxo5RUOr5WlOM8Y4QHocK61IXFDtr1pFTu0ZL3JybAZNDrNHKCOziad9mSfyaVD0UfQ3opuMxFLMCK1DCFlNbUNu+06Sgm2hWo5gVNL52tr5LdeNt6Fj2Ba3zkETF3u3DfFbmsERRSxgiOnnbLEE+Cwg9FJbZhbdetpJe6+hPDRSkDLqM4okIzHXotWjZoGfBbv6hoXvtvif8V0ZsTLWIGqSnOhbjQVH+jVpspouJamn8oAR1LUZwXvLHPfUiY2NjyqN+ADGocOtJjIURVv8YWPs7jfBMyjPLQeJ8Y83JY/13Bj11XwWMGe6pjxO6vQAAAABJRU5ErkJggg==)
    }

.loader--XEZF3.white--Q9HuR[data-size='m'] {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAqFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8j1z1tAAAAOHRSTlMABAwJDt3h2tMt8ufXGRD27m9pB+O8oU4dE+l3Ixb++sGsYllTybaKg3tEODEo+OuZl5Byp6ZJPrYPFgkAAAGESURBVDjLldDpbqMwFIbhQ7CxDTYUCBB2CNm3Zuly/3c2Rhl1pk0TTt5fCB4dfQJuIqIL8jz42BIYSKwXtm2/6F6zrL1MHtDPyPM8W9fj18xxnHZ272p0OPSYn5Z5voqbTOvxePHrdb+q6/oQJeRr/Me515Z/Q92oqqp67cK3JmdnbFlH8uMt9+oqKuCmSat1820Kmb/Y3hp+7TK2aDOCfx0tJ+vgTlPLou/wVSApncLdZtZ/n9Wc8wAe5FPK9nAtns+P8LA3yuLr0yaKGvUYTyhjW+hbLRYXGMj/ezp9a9tyCBPKZL86ieMABntnslf+6bQbxhsm9Q5zuTybw5gwyUdQrFYBIGok30OR5zMMXkqegPD9TwxeS97BbjrdYbAveQCi6wQGz5ieUSSJAJROANRmswdso+12h8aGEMJAa1UUJn6HUil+h1IK0LllOcKfLsvSwJ9OU4I/naapidam67oh/ve5LnlCE/KM1j2xu9cGVhumDs9DMwxDQ4e8frXoEBbXH2hfHFzMmBOQAAAAAElFTkSuQmCC);
        }

.loader--XEZF3[data-size='m'] {
        width: 30px;
        height: 30px;
        -webkit-animation: 1.1s rotate--VfLEe linear infinite;
                animation: 1.1s rotate--VfLEe linear infinite
    }

@media (min-width: 768px) {

.loader--XEZF3[data-size='m'] {
            width: 40px;
            height: 40px
    }
        }

.root--1cRpj {
    margin-bottom: 16px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--2bhFi, .h1--5uk3p {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--2bhFi, .h1--5uk3p {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--NwdzA, .h2--P9S83 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--NwdzA, .h2--P9S83 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--UBMxE, .h3--FsCeH, .title--PNmQB {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--wCQXK, .h4--bjh66 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--wCQXK, .h4--bjh66 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--4FD01, .h5--jmV\+o {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--gfQhF, .h6--U0OBo {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--gfQhF, .h6--U0OBo {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.title--PNmQB {
    margin: 0 0 15px;
}

.titleWrapper--S63x7 {
    margin: 10px 0 15px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--xOkgA, .h1--jaNAx {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--xOkgA, .h1--jaNAx {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--M8gvb, .h2--bFJF- {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--M8gvb, .h2--bFJF- {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--4O5V1, .h3--8FbHG {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--7a6NG, .h4--K5h7K {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--7a6NG, .h4--K5h7K {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--zN-If, .h5--V9a5O {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--75fVK, .h6--3j\+Q5 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--75fVK, .h6--3j\+Q5 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.container--fGSZR {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 15px;
}

.strike--i63d1 {
    text-decoration: line-through;
}

.loaderWrapper--PqHbK {
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.loaderWrapper--PqHbK span {
    display: block;
}

.buttonWrap--HzOCz {
    margin-top: 40px;
}

.footerError--OTJxS {
    margin: 21px 0 0;
    color: var(--color-input-error);
    text-align: center;
    font-size: 15px;
    line-height: 20px;
}

.root--ugQMm a {
    text-decoration: underline;
}

.icon--xRWI7 {
    height: 70px;
    background-image: url(https://static2.tinkoffjournal.ru/urania-front/d389577aba092760dece7f69b018e79ff69c2e2d/unsuccess-8d53a17de921856d9c18cb09be0e3170.png);
    background-repeat: no-repeat;
    background-size: 55px;
    background-position-y: -1px
}

@media (min-width: 768px) {

.icon--xRWI7 {
        height: 75px;
        background-position-y: 2px
}
    }

.successIcon--sH6rQ {
    background-image: url(https://static2.tinkoffjournal.ru/urania-front/d389577aba092760dece7f69b018e79ff69c2e2d/success-feb52e476752038931cf983fbfb43b7f.png);
}

@media (hover: hover) {
    .root--ugQMm a:hover {
        color: var(--colorLinkHoverDark);
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.interface-heading-one--LS9lR {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--LS9lR {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--6ijhf, .root--cVViv[data-size='large'] {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--zfFqF {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--AvB0L {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--AvB0L {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--vqvHt, .root--cVViv {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--mN0Xv {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--mN0Xv {
        font: var(--interface-heading)
}
    }

.root--cVViv {
    padding: 5px 9px 3px;
    background-color: rgb(var(--surface-primary));
    border: 1px solid rgb(var(--border-medium none currentColor));
    border: 1px solid rgb(var(--border-initial));
    border-radius: 25px;
    color: rgb(var(--surface-on-primary));
    cursor: pointer;
}

.root--cVViv[data-size='large'] {
    padding: 4px 14px;
}

.root--cVViv[data-grade='secondary'] {
    border: none;
    padding: 6px 10px 4px;
    background-color: rgb(var(--button-secondary));
}

.root--cVViv[data-size='large'][data-grade='secondary'] {
    padding: 5px 15px;
}

.root--cVViv[data-is-selected='true'] {
    background-color: rgb(var(--surface-interactive));
    color: rgb(var(--surface-on-interactive));
}

.root--cVViv[data-is-selected='true'][data-grade='primary'] {
    border: 1px solid rgb(var(--border-focus));
}

.root--cVViv:disabled {
    opacity: var(--opacity-interactive-disabled);
    cursor: auto;
    cursor: initial;
}

@media (hover: hover) {
    .root--cVViv:not(:disabled):hover {
        border-color: rgb(var(--border-hover));
    }

    .root--cVViv[data-grade='secondary']:not(:disabled):hover {
        background-color: rgb(var(--button-secondary-hover));
    }

    .root--cVViv[data-is-selected='true']:not(:disabled):hover {
        background-color: rgb(var(--surface-interactive-hover));
    }
}

.presetsWrapper--I\+Ykf {
    display: grid;
    grid-template-columns: repeat(3, minmax(78px, 100%));
    grid-gap: 5px;
}

.presetItem--ByeGd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.interface-heading-one--FsKQd {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--FsKQd {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--D9DwQ {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--peeVj {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--X4gmF {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--X4gmF {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--b1YNR, .inputCaption--6jeHV {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--L27o2 {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--L27o2 {
        font: var(--interface-heading)
}
    }

.root--btt6B {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

.root--btt6B[data-has-title='false'] {
    margin-top: 10px;
}

.inputWrapper--U9z1C.withPresets--4QcFW {
    margin-top: 10px;
}

.buttonWrapper--5uA1Q {
    margin-top: 40px;
}

.inputCaption--6jeHV {
    color: rgb(var(--surface-on-placeholder));
    margin-bottom: 4px;
}

.root--sL7QG {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

.copiedTextWrapper--hJ5dm {
    margin: 0;
    padding: 14px;
    border-radius: 10px;
    font: var(--interface-secondary);
    color: rgb(var(--surface-on-secondary));
    background-color: rgb(var(--background-secondary));
    border: 1px solid rgb(var(--border-medium none currentColor));
    border: 1px solid rgb(var(--border-initial));
    cursor: text;
}

.copiedTextInnerWrapper--N6yaJ {
    overflow-y: scroll;
    /* this will hide the scrollbar in old mozilla based browsers */
    overflow: -moz-scrollbars-none;
    /* For Firefox 64+ scrollbar */
    scrollbar-width: none;
    /* this will hide the scrollbar in internet explorers */
    -ms-overflow-style: none;
}

.copiedTextInnerWrapper--N6yaJ::-webkit-scrollbar {
    height: 0;
    background: transparent;
    display: none;
}

.copiedText--ISydT {
    margin: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.error--2-9uf {
    display: inline-block;
    font: var(--body-small);
    color: rgb(var(--surface-on-negative));
    margin-top: 5px;
}

.buttonWrapper--g6RWd {
    margin-top: 10px;
}

.titleWrapper--8fBM0 {
    margin: 10px 0;
}

.emailWrapper--sYmge {
    margin-top: 15px;
}

.courseImage--Ju0jX {
    display: block;
    max-width: 100%;
    border-radius: 15px 15px 0 0;
    position: relative;
    background-color: rgb(var(--surface-accent));
}

.giftImage--cXJr1 {
    position: absolute;
    top: 5px;
    left: 7px;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.stateWrapper--GLGC3[data-has-image='true'] {
    padding-bottom: 25px;
}

.root--lY5IW {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: 10px;
}

.star--1NEsC {
    width: 16px;
    height: 15px;
    position: relative;
    top: -1px
}

@media (min-width: 768px) {

.star--1NEsC {
        width: 17px;
        height: 16px
}
    }

.star--1NEsC:not(:last-child) {
    margin-right: 5px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.accent-number--gUr-V {
    font: 45px/50px Graphik;
    font: var(--accent-number);
}

.accent-quote--\+IQOU {
    font: 25px/35px Graphik;
    font: var(--accent-quote-mobile)
}

@media (min-width: 760px) {

.accent-quote--\+IQOU {
        font: 35px/50px Graphik;
        font: var(--accent-quote-desktop)
}
    }

.accent-lead--EOjN\+ {
    font: 23px/30px Charter;
    font: var(--accent-lead-mobile)
}

@media (min-width: 760px) {

.accent-lead--EOjN\+ {
        font: 27px/35px Charter;
        font: var(--accent-lead-desktop);
        letter-spacing: -0.3px
}
    }

.accent-bold--Xh9GT {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile)
}

@media (min-width: 760px) {

.accent-bold--Xh9GT {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop)
}
    }

.accent-label--ofDcH, .root--ohHnl {
    font: 13px/15px Graphik;
    font: var(--accent-label-mobile);
    letter-spacing: 1px;
    text-transform: uppercase
}

@media (min-width: 760px) {

.accent-label--ofDcH, .root--ohHnl {
        font: 15px/20px Graphik;
        font: var(--accent-label-desktop)
}
    }

.highlight--GvnXg {
    background-color: var(--color-highlight);
    color: var(--color-highlight-on);
    -webkit-box-shadow:
        -5px -3px 0 var(--color-highlight),
        5px -3px 0 var(--color-highlight),
        -5px 3px 0 var(--color-highlight),
        5px 3px 0 var(--color-highlight);
            box-shadow:
        -5px -3px 0 var(--color-highlight),
        5px -3px 0 var(--color-highlight),
        -5px 3px 0 var(--color-highlight),
        5px 3px 0 var(--color-highlight);
}

.root--ohHnl {
    display: inline-block;
    border-radius: 70px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: rgb(var(--surface-on-secondary));
}

.root--ohHnl + .root--ohHnl {
    margin-left: 5px;
}

.contentWrapper--fL11H {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 4px 9px 2px;
}

.root--HzTdv {
    margin-top: 20px;
}

.root--HzTdv[data-is-centered='true'] {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .root--HzTdv[data-should-show-gift-button='true'] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

    .root--HzTdv[data-is-retake-exam='true'] {
        width: 260px;
    }

    .root--HzTdv[data-should-show-gift-button='true'][data-is-retake-exam='true'] {
        width: 530px;
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.title--hFElv, .headerTitle--ug6dg {
    font: bold 32px/35px Graphik;
    font: var(--title-mobile)
}

@media (min-width: 760px) {

.title--hFElv, .headerTitle--ug6dg {
        font: bold 45px/50px Graphik;
        font: var(--title-desktop)
}
    }

.subtitle--8cizc {
    font: 24px/30px Graphik;
    font: var(--subtitle-mobile)
}

@media (min-width: 760px) {

.subtitle--8cizc {
        font: 30px/35px Graphik;
        font: var(--subtitle-desktop)
}
    }

.imgWrapper--E71vO {
    margin: 0 -20px 19px
}

@media (min-width: 768px) {

.imgWrapper--E71vO {
        margin: 20px 0 29px
}
    }

.img--i4STD {
    overflow: hidden;
    width: 100%
}

@media (min-width: 768px) {

.img--i4STD {
        border-radius: 10px
}
    }

.mainHeading--OBK-l {
    text-align: left;
    margin: 0 auto 71px
}

@media (min-width: 768px) {

.mainHeading--OBK-l {
        text-align: center;
        margin-bottom: 101px
}
    }

.headerTitle--ug6dg {

    margin: 0 0 10px;
}

.subtitle--8cizc {
    margin-top: 0;
    margin-bottom: 13px;
    font-size: 21px;
    line-height: 30px;
    font-weight: 400;
    color: rgb(var(--surface-on-secondary))
}

@media (min-width: 768px) {

.subtitle--8cizc {
        padding: 0 60px
}
    }

.metaWrapper--CV37G {
    margin-bottom: 3px;
    font: 15px/20px Graphik;
    font: var(--body-medium)
}

@media (min-width: 768px) {

.metaWrapper--CV37G {
        margin: 0 auto 3px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
}
    }

.mainHeading--OBK-l[data-is-expanded='true'] .metaWrapper--CV37G {
    margin-bottom: 11px;
}

.mainHeading--OBK-l[data-is-expanded='true'] .subtitle--8cizc {
    margin-bottom: 29px;
}

.aboutCourseButton--Chjs8 {
    margin-bottom: 35px;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.body-primary--ChND8 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}
@media (min-width: 760px) {
.body-primary--ChND8 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }
.body-secondary--c8aXS {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}
@media (min-width: 760px) {
.body-secondary--c8aXS {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }
.body-large--h7TdE {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large-bold--CWkxX {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--skk2u, .author--T00zb {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium-bold--zwKBz {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--VVzXD {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small-bold--SVNQz {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
.author--T00zb {
    margin: 30px 0;
    height: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;

    /* Отключает стандартные стили ссылки */
    text-decoration: none;
}
.author--T00zb[data-link='true'] {
    cursor: pointer;
}
.author--T00zb[data-is-in-list='true'] {
    margin: 15px 0;
    height: auto;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
}
@media (min-width: 760px) {
.author--T00zb[data-size='medium'] {
        height: auto;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center
}
    }
@media (min-width: 760px) {
.author--T00zb[data-orientation='vertical'] {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start
}
    }
.imageWrapper--91bME {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: rgba(var(--surface-top), var(--opacity-surface-top));
}
.image--TFR3f {
    width: inherit;
    height: inherit;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
}
@media (min-width: 760px) {
.author--T00zb[data-size='medium'] .imageWrapper--91bME {
        width: 100px;
        height: 100px;
        margin-right: 15px;
        margin-left: -5px;
        -webkit-align-self: flex-start;
            -ms-flex-item-align: start;
                align-self: flex-start
}
    }
@media (min-width: 760px) {
.author--T00zb[data-size='medium'][data-orientation='vertical'] .imageWrapper--91bME {
        margin-right: 0;
        margin-bottom: 11px
}
    }
.caption--dxIsS {
    color: rgb(var(--surface-on-primary));
}
@media (hover: hover) {
    .author--T00zb[data-link='true']:hover .caption--dxIsS > *:first-child {
        color: rgb(var(--surface-on-hover));
    }
}
.author--T00zb[data-nomargin='true'] {
    margin: 0;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--dRP8t, .h1--zy2mS {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--dRP8t, .h1--zy2mS {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--p\+zcJ, .h2--cQkEk, .root--ZKI7E[data-size='extra-large'] {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--p\+zcJ, .h2--cQkEk, .root--ZKI7E[data-size='extra-large'] {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three---fbHX, .h3--HNvNX {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--hm1TU, .h4--UoX-P {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--hm1TU, .h4--UoX-P {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--Uls\+2, .h5--xb9Ka {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--y3h20, .h6--u\+QOx {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--y3h20, .h6--u\+QOx {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.root--ZKI7E {
    font: 15px/20px Graphik;
    font: var(--body-medium);
    color: rgb(var(--surface-on-secondary));
}

.root--ZKI7E p {
    margin: 0;
}

.root--ZKI7E a {
    color: rgb(var(--surface-on-secondary));
    text-decoration: none;
    padding-bottom: 3px;
    background-repeat: repeat-x;
    background-size: 100% 1px;
    background-position: 0 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--surface-on-secondary), 0.5)), to(rgba(var(--surface-on-secondary), 0.5)));
    background-image: linear-gradient(rgba(var(--surface-on-secondary), 0.5), rgba(var(--surface-on-secondary), 0.5));
}

.root--ZKI7E p:not(:last-child) {
    margin: 0 0 20px;
}

.root--ZKI7E[data-size='small'] p:not(:last-child) {
    margin-bottom: 10px;
}

.root--ZKI7E[data-size='large'] {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.root--ZKI7E[data-grade='primary'] {
    color: rgb(var(--surface-on-primary));
}

.root--ZKI7E[data-grade='placeholder'] {
    color: rgb(var(--surface-on-placeholder));
}

.root--ZKI7E[data-grade='primary'] a {
    color: rgb(var(--surface-on-primary));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--surface-on-primary), 0.5)), to(rgba(var(--surface-on-primary), 0.5)));
    background-image: linear-gradient(rgba(var(--surface-on-primary), 0.5), rgba(var(--surface-on-primary), 0.5));
}

.root--ZKI7E[data-grade='placeholder'] a {
    color: rgb(var(--surface-on-placeholder));
    background-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(var(--surface-on-placeholder), 0.5)),
        to(rgba(var(--surface-on-placeholder), 0.5))
    );
    background-image: linear-gradient(
        rgba(var(--surface-on-placeholder), 0.5),
        rgba(var(--surface-on-placeholder), 0.5)
    );
}

.root--ZKI7E[data-is-bold='true'] {
    font-weight: 600;
}

.root--ZKI7E a[data-is-accent='true'] {
    color: rgb(var(--surface-on-interactive));
    background-image: none;
}

.root--ZKI7E b[data-is-primary='true'] {
    color: rgb(var(--surface-on-primary));
}

.root--ZKI7E span[data-is-warning='true'] {
    color: rgb(var(--surface-on-warning));
}

@media (hover: hover) {
    .root--ZKI7E a:hover {
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(var(--surface-on-secondary), 0.7)),
            to(rgba(var(--surface-on-secondary), 0.7))
        );
        background-image: linear-gradient(
            rgba(var(--surface-on-secondary), 0.7),
            rgba(var(--surface-on-secondary), 0.7)
        );
    }

    .root--ZKI7E[data-grade='placeholder'] a:hover {
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(var(--surface-on-placeholder), 0.7)),
            to(rgba(var(--surface-on-placeholder), 0.7))
        );
        background-image: linear-gradient(
            rgba(var(--surface-on-placeholder), 0.7),
            rgba(var(--surface-on-placeholder), 0.7)
        );
    }

    .root--ZKI7E[data-grade='primary'] a:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--surface-on-primary), 0.7)), to(rgba(var(--surface-on-primary), 0.7)));
        background-image: linear-gradient(rgba(var(--surface-on-primary), 0.7), rgba(var(--surface-on-primary), 0.7));
    }

    .root--ZKI7E a[data-is-accent='true']:hover {
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(var(--surface-on-interactive), 0.7)),
            to(rgba(var(--surface-on-interactive), 0.7))
        );
        background-image: linear-gradient(
            rgba(var(--surface-on-interactive), 0.7),
            rgba(var(--surface-on-interactive), 0.7)
        );
    }
}


    @media (min-width: 768px) {

.authors--SGyJP {
        -webkit-columns: 2;
           -moz-columns: 2;
                columns: 2;
        -webkit-column-gap: 0;
           -moz-column-gap: 0;
                grid-column-gap: 0;
                column-gap: 0
}
    }

.author--YPoqq {
    padding-right: 30px;
    font: var(--body-medium);
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
}

.author--YPoqq:first-child > div {
    margin-top: 0;
}

.root---5udB {
    margin: 50px auto 0
}

@media (min-width: 768px) {

.root---5udB {
        margin-top: 70px
}
    }

.root---5udB[data-size='l'] {
    margin-top: 70px
}

@media (min-width: 768px) {

.root---5udB[data-size='l'] {
        margin-top: 100px
}
    }

.title--DRp\+t {
    margin: 0 0 20px;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@media (min-width: 760px) {
.root--zsyKd {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 25px 20px
}
    }
@media (min-width: 760px) {
.root--zsyKd[data-orientation='vertical'] {
        grid-template-columns: repeat(4, 1fr)
}
    }
@media (min-width: 760px) {
.root--zsyKd[data-orientation='vertical'][data-is-five-experts-per-row='true'] {
        grid-template-columns: repeat(5, 1fr)
}
    }
.expertWrapper--r4fr6:not(:last-child) {
    margin-bottom: 15px
}
@media (min-width: 760px) {
.expertWrapper--r4fr6:not(:last-child) {
        margin-bottom: 0
}
    }
@media (min-width: 760px) {
.expertContentWrapper--4TOIT {
        max-width: 260px
}
    }
@media (min-width: 760px) {
.root--zsyKd[data-orientation='vertical'] .expertContentWrapper--4TOIT {
        max-width: 175px
}
    }

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.root--ytKq6 {
    width: 100vw;
    max-width: var(--contentMaxWidth);
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin-top: 20px
}
@media (min-width: 820px) {
.root--ytKq6 {
        width: 100%
}
    }
@media (min-width: 820px) {
.root--ytKq6[data-is-wide='true'] {
        width: calc(100vw - 2 * var(--bodyTabletPaddingUrania))
}
    }
.card--YPvoi {
    max-width: 100%;
    max-height: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    width: calc(100% - 40px)
}
@media (min-width: 760px) {
.card--YPvoi {
        width: 700px
}
    }
@media (min-width: 820px) {
.card--YPvoi {
        width: 100%
}
    }
.descriptionWrapper--J3RPu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    grid-gap: 5px;
    gap: 5px;
    margin: 20px auto 0;
    padding: 0 var(--bodyMobilePaddingUrania)
}
@media (min-width: 768px) {
.descriptionWrapper--J3RPu {
        padding: 0 var(--bodyTabletPaddingUrania);
        max-width: var(--contentTabletWidth)
}
    }
@media (min-width: 992px) {
.descriptionWrapper--J3RPu {
        padding: 0;
        max-width: var(--urania-max-content-width)
}
    }

@-webkit-keyframes rotate--075T5 {
    from {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes rotate--075T5 {
    from {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@-webkit-keyframes skeletonAnimate--Uxx44 {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.5;
    }
}

@keyframes skeletonAnimate--Uxx44 {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.5;
    }
}

.root--u0De7:not(:last-child) {
    margin-bottom: 10px;
}

.innerWrapper--KT6B0 {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    border-radius: 15px;
    padding: 19px;
    background-color: rgb(var(--surface-primary));
    color: rgb(var(--surface-on-primary))
}

@media (min-width: 768px) {

.innerWrapper--KT6B0 {
        padding: 24px 29px
}
    }

.studentLink--Mwz7E {
    text-decoration: none;
    position: relative;
    left: -2px;
    margin-bottom: 14px;
}

.authorSkeleton--pvub7 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.authorAvatarSkeleton--puJo4 {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-color: var(--surface-on-disabled);
    border-radius: 50%;
}

.reviewTextWrapper--CiTTQ {
    font: var(--body-large);
    color: rgb(var(--surface-on-secondary));
}

.infoWrapper--xVaH9 {
    padding-top: 1px;
}

.role--VSY3M, .date--1DQv3 {
    color: rgb(var(--surface-on-secondary));
}

.date--1DQv3 {
    white-space: nowrap;
}

.role--VSY3M {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.role--VSY3M[data-has-date='true']::after {
    content: '.';
    position: relative;
    top: -4px;
    left: 4px;
}

.nameWrapper--S1cfc {
    display: inline-block;
    color: rgb(var(--surface-on-interactive));
    background-repeat: repeat-x;
    background-size: 100% 1px;
    background-position: 0 100%;
}

.root--u0De7[data-has-author='false'] .nameWrapper--S1cfc, .root--u0De7[data-has-author='false'] .secondaryDataWrapper--1A5Gt {
    width: 100px;
    height: 10px;
    background-color: var(--surface-on-disabled);
}

.root--u0De7[data-has-author='false'] .nameWrapper--S1cfc {
    margin: 4px 0 7px;
}

.root--u0De7[data-has-author='false'] .secondaryDataWrapper--1A5Gt {
    width: 150px;
}

.root--u0De7[data-has-author='false'] .studentLink--Mwz7E {
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-name: skeletonAnimate--Uxx44;
            animation-name: skeletonAnimate--Uxx44;
    -webkit-animation-duration: 2000ms;
            animation-duration: 2000ms;
}

@media (hover: hover) {
    .root--u0De7[data-has-author='true'] .studentLink--Mwz7E:hover .nameWrapper--S1cfc {
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(var(--surface-on-interactive), 0.7)),
            to(rgba(var(--surface-on-interactive), 0.7))
        );
        background-image: linear-gradient(
            rgba(var(--surface-on-interactive), 0.7),
            rgba(var(--surface-on-interactive), 0.7)
        );
    }
}


    @media (max-width: 768px) {

.root--vHRFi {
        margin: 0 -20px
}
    }

.allReviews--DRfCX {
    position: relative;
    left: -2px;
    height: 30px;
    padding: 2px 0 0 40px;
    font: var(--body-large);
    margin: 20px 0 0;
    background-image: url("data:image/svg+xml,%3csvg width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='15' cy='15' r='15' fill='%23313131'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='m15.408 12.87-5.286-1.922a.562.562 0 0 1-.336-.72l.628-1.728a.563.563 0 0 1 .72-.336l8.744 3.18c.222.08.37.291.37.528v1.996a.563.563 0 0 1-.37.529l-8.743 3.179a.563.563 0 0 1-.721-.336l-.628-1.727a.562.562 0 0 1 .336-.721l5.286-1.922ZM9.992 19.807c0-.31.252-.562.563-.562h9.13c.311 0 .563.252.563.562v1.5c0 .311-.252.563-.562.563h-9.131a.563.563 0 0 1-.563-.563v-1.5Z' fill='%23FF8A00'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.accent-number--jz9Om {
    font: 45px/50px Graphik;
    font: var(--accent-number);
}

.accent-quote--tvK6c, .day--nXTIi {
    font: 25px/35px Graphik;
    font: var(--accent-quote-mobile)
}

@media (min-width: 760px) {

.accent-quote--tvK6c, .day--nXTIi {
        font: 35px/50px Graphik;
        font: var(--accent-quote-desktop)
}
    }

.accent-lead--th3Pp {
    font: 23px/30px Charter;
    font: var(--accent-lead-mobile)
}

@media (min-width: 760px) {

.accent-lead--th3Pp {
        font: 27px/35px Charter;
        font: var(--accent-lead-desktop);
        letter-spacing: -0.3px
}
    }

.accent-bold--F2wuN {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile)
}

@media (min-width: 760px) {

.accent-bold--F2wuN {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop)
}
    }

.accent-label--b6P5X {
    font: 13px/15px Graphik;
    font: var(--accent-label-mobile);
    letter-spacing: 1px;
    text-transform: uppercase
}

@media (min-width: 760px) {

.accent-label--b6P5X {
        font: 15px/20px Graphik;
        font: var(--accent-label-desktop)
}
    }

.highlight--KFwG7 {
    background-color: var(--color-highlight);
    color: var(--color-highlight-on);
    -webkit-box-shadow:
        -5px -3px 0 var(--color-highlight),
        5px -3px 0 var(--color-highlight),
        -5px 3px 0 var(--color-highlight),
        5px 3px 0 var(--color-highlight);
            box-shadow:
        -5px -3px 0 var(--color-highlight),
        5px -3px 0 var(--color-highlight),
        -5px 3px 0 var(--color-highlight),
        5px 3px 0 var(--color-highlight);
}

.interface-heading-one--7vX6k {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--7vX6k {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--1ysen {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--esM91 {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--VM\+w1 {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--VM\+w1 {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--7bQZU, .month--hIe4g {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--wkL09 {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--wkL09 {
        font: var(--interface-heading)
}
    }

.root--ROTTI {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0 14px 0 19px;
    margin: 0 -20px;
    min-height: 40px;
    border-radius: 15px;
    border: 1px solid rgb(var(--border-surface));
    background-color: rgb(var(--surface-primary));
    color: rgb(var(--surface-on-primary));
    text-decoration: none
}

@media (min-width: 768px) {

.root--ROTTI {
        min-height: 103px;
        padding: 0 var(--bodyTabletPaddingUrania);
        margin: 0
}
    }

.root--ROTTI[data-bonus='true'] {
    background-color: transparent;
}

.root--ROTTI[data-bonus='true'][data-disabled='true'] .leftColumn--y1Ztt {
    opacity: 0.5;
}

.headerText--5VFuF {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 4px;
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold)
}

@media (min-width: 768px) {

.headerText--5VFuF {
        margin-bottom: 5px
}
    }

.icon--lDrTT {
    padding-top: 1px;
    padding-left: 1px;
    margin-right: 7px;
    height: 19px;
}

.root--ROTTI[data-disabled='true'] {
    color: var(--surface-on-disabled);
    cursor: default;
}

.root--ROTTI[data-finished='true'] .headerText--5VFuF {
    color: rgb(var(--surface-on-positive));
}

.root--ROTTI[data-bonus='false'][data-finished='true'] .icon--lDrTT {
    width: 13px;
    height: 13px;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
}

.root--ROTTI[data-locked='false'][data-finished='false'] .headerText--5VFuF {
    position: relative;
    left: -5px;
}

.root--ROTTI[data-locked='false'][data-finished='false'] .icon--lDrTT {
    position: relative;
    top: -2px;
}

.leftColumn--y1Ztt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    margin-right: 20px;
    padding: 15px 0 14px
}

@media (min-width: 768px) {

.leftColumn--y1Ztt {
        padding: 20px 0 18px 0;
        margin-right: 40px
}
    }

.title--Yom7A {
    font-size: 17px;
    line-height: 20px
}

@media (min-width: 768px) {

.title--Yom7A {
        font-size: 21px;
        line-height: 30px
}
    }

.preview--Jd\+4H {
    padding: 9px 0;
    margin: auto 0 auto auto;
    width: 55px;
    height: 55px
}

@media (min-width: 768px) {

.preview--Jd\+4H {
        padding: 14px 0;
        width: 75px;
        height: 75px
}
    }

.root--ROTTI[data-disabled='true'] .preview--Jd\+4H {
    opacity: 0.3;
}

.announceDate--AKtRp {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 55px;
    height: 46px;
    margin: auto 0 auto auto;
    padding-top: 9px;
    color: rgb(var(--surface-on-primary))
}

@media (min-width: 768px) {

.announceDate--AKtRp {
        min-width: 74px;
        height: 68px;
        padding-right: 1px;
        padding-top: 7px
}
    }

.announceDate--AKtRp::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -7px;
    width: 66px;
    height: 53px;
    padding-right: 1px;
    border: 1px solid rgb(var(--border-surface));
    border-radius: 47%;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg)
}

@media (min-width: 768px) {

.announceDate--AKtRp::before {
        top: 2px;
        left: -6px;
        width: 82px;
        height: 65px
}
    }

.month--hIe4g {

    position: relative;
    top: -9px
}

@media (min-width: 768px) {

.month--hIe4g {
        top: -13px
}
    }

@media (hover: hover) {
    .root--ROTTI:not([data-disabled='true']):hover {
        border: 1px solid rgb(var(--border-hover));
    }
}

.lessonCard--aOlWv:not(:last-child) {
    margin-bottom: 10px;
}

.root--CoMLU {
    font: var(--body-large);
    color: rgb(var(--surface-on-secondary));
}

.item--9Ndmi {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.item--9Ndmi:not(:last-child) {
    margin-bottom: 15px
}

@media (min-width: 768px) {

.item--9Ndmi:not(:last-child) {
        margin-bottom: 10px
}
    }

.image--ta9ql {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.root--BrjVG {
    font: var(--body-large);
    color: rgb(var(--surface-on-primary));
}

.item--8Q49P {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.item--8Q49P:not(:last-child) {
    margin-bottom: 20px;
}

.image--QMvXB {
    min-width: 50px;
    height: 50px;
    margin-right: 20px;
}

.title--BwMxA {
    margin: 0;
}

.root--BE6Ip {
    margin-top: 20px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--6lrYO, .h1--4jHgn {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--6lrYO, .h1--4jHgn {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--3XsTj, .h2--fxKvG, .body--fseEm h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--3XsTj, .h2--fxKvG, .body--fseEm h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--x8409, .h3--7j6DR {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--fuOQn, .h4--DsTO6 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--fuOQn, .h4--DsTO6 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--dxxBD, .h5--\+SxWe {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--J8a6T, .h6--Z3wNO {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--J8a6T, .h6--Z3wNO {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

/* мы так делаем, чтобы редакторам было удобно через админку просто теги вставлять. */

.body--fseEm > div, .additionalDescriptionWrapper--kQizc {
    margin: 0 auto;
}

.body--fseEm > div:not(:last-child) {
    margin-bottom: 50px
}

@media (min-width: 768px) {

.body--fseEm > div:not(:last-child) {
        margin-bottom: 70px
}
    }

.body--fseEm h2 {

    margin-bottom: 20px;
}

.body--fseEm > b, .subTitle--0IYJH {
    color: rgb(var(--surface-on-primary));
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body--fseEm p, .paragraph--fmcoJ {
    margin: 0;
    font: 17px/25px Graphik;
    font: var(--body-large);
    color: rgb(var(--surface-on-secondary));
}

.body--fseEm a, .paragraph--fmcoJ a, .payExtraButton--bFbbi {
    color: rgb(var(--surface-on-secondary));
    text-decoration: none;
    cursor: pointer;
    padding-bottom: 3px;
    background-repeat: repeat-x;
    background-size: 100% 1px;
    background-position: 0 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--surface-on-secondary), 0.5)), to(rgba(var(--surface-on-secondary), 0.5)));
    background-image: linear-gradient(rgba(var(--surface-on-secondary), 0.5), rgba(var(--surface-on-secondary), 0.5));
}

.body--fseEm h2 a {
    color: rgb(var(--surface-on-primary));
}

.body--fseEm a[data-accent='true'], .paragraph--fmcoJ a[data-accent='true'] {
    color: rgb(var(--surface-on-interactive));
    background-image: none;
}

.body--fseEm > div > p:not(:first-child), .body--fseEm > div > p ~ [class~='img'], .paragraph--fmcoJ {
    margin-top: 20px;
}

.body--fseEm ul li {
    position: relative;
    padding-left: 70px;
}

.body--fseEm ul[data-has-title='false'] li {
    padding-left: 35px;
}

.body--fseEm ul li:not(:last-child) {
    margin-bottom: 20px;
}

.body--fseEm ul[data-has-title='false'] li:not(:last-child) {
    margin-bottom: 15px
}

@media (min-width: 768px) {

.body--fseEm ul[data-has-title='false'] li:not(:last-child) {
        margin-bottom: 10px
}
    }

.body--fseEm ul li > h4 {
    margin: 0;
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body--fseEm ul li span > img {
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    position: absolute;
}

.body--fseEm ul[data-has-title='false'] li span > img {
    width: 25px;
    height: 25px;
}

.body--fseEm > div [class~='img'] img {
    display: block;
    width: 100%;
}

.body--fseEm > div [class~='desktop'] {
    display: none
}

@media (min-width: 768px) {

.body--fseEm > div [class~='desktop'] {
        display: block
}
    }

.body--fseEm > div [class~='mobile'] {
    display: block
}

@media (min-width: 768px) {

.body--fseEm > div [class~='mobile'] {
        display: none
}
    }

.additionalDescriptionWrapper--kQizc {
    margin-top: 10px
}

@media (min-width: 768px) {

.additionalDescriptionWrapper--kQizc {
        margin-top: 15px
}
    }

.payExtraButton--bFbbi {
    background-color: transparent;
    outline: none;
    padding: 0;
    border: none;
    font: inherit;
}

@media (hover: hover) {
    .body--fseEm a:hover, .paragraph--fmcoJ a:hover, .payExtraButton--bFbbi:hover {
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(var(--surface-on-secondary), 0.7)),
            to(rgba(var(--surface-on-secondary), 0.7))
        );
        background-image: linear-gradient(
            rgba(var(--surface-on-secondary), 0.7),
            rgba(var(--surface-on-secondary), 0.7)
        );
    }

    .body--fseEm a[data-accent='true']:hover, .paragraph--fmcoJ a[data-accent='true']:hover {
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(var(--surface-on-interactive), 0.7)),
            to(rgba(var(--surface-on-interactive), 0.7))
        );
        background-image: linear-gradient(
            rgba(var(--surface-on-interactive), 0.7),
            rgba(var(--surface-on-interactive), 0.7)
        );
    }
}

.coursesWrapper--7LOVV {
    padding: 0 var(--bodyMobilePaddingUrania)
}
@media (min-width: 768px) {
    .coursesWrapper--7LOVV {
        padding: 0 var(--bodyTabletPaddingUrania)
}
    }

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.body-primary--jTV80 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}

@media (min-width: 760px) {

.body-primary--jTV80 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }

.body-secondary--6GEXS {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}

@media (min-width: 760px) {

.body-secondary--6GEXS {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }

.body-large--RClqt {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.body-large-bold--V11MS {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body-medium--2U7WL, .likes--bc\+W2 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}

.body-medium-bold--6IC-O {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}

.body-small--iA1cb {
    font: 13px/15px Graphik;
    font: var(--body-small);
}

.body-small-bold--6x\+Fo {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}

.likes--bc\+W2 {
    color: rgb(var(--surface-on-#000));
    color: rgb(var(--surface-on-initial));
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;

    /* Отключает стандартные стили кнопки */
    background-color: transparent;
    border: none;
    -webkit-appearance: none;

    /* Увеличиваем кликабельную область */
    height: 45px;
    padding-right: 4px;
    padding-left: 16px;

    /* Компенсация кликабельной области,
    чтобы можно было выравнивать по контуру */
    margin-left: -16px;
    margin-top: -10px;
    margin-bottom: -10px;
}

.likes--bc\+W2[data-with-counter='true'] {
    padding-left: 4px;
    margin-left: -4px;
}

@media (hover: hover) {
    .likes--bc\+W2:hover {
        color: rgb(var(--surface-on-hover));
    }
}

.counter--jCntW {
    margin-left: 3px;
    margin-top: 2px;
}

.icon--ibEwI {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 2px;
    padding-bottom: 2px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.body-primary--g4UnV {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}

@media (min-width: 760px) {

.body-primary--g4UnV {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }

.body-secondary--Ql2Lc {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}

@media (min-width: 760px) {

.body-secondary--Ql2Lc {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }

.body-large--m-tzz {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.body-large-bold--p8339 {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body-medium--H-pZL, .bubble--1dzpk {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}

.body-medium-bold--4NPrX {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}

.body-small--ZbRWU, .bubble--1dzpk[data-inline='true'] {
    font: 13px/15px Graphik;
    font: var(--body-small);
}

.body-small-bold--Ve46X {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}

.bubble--1dzpk {
    color: rgb(var(--surface-on-#000));
    color: rgb(var(--surface-on-initial));
    text-decoration: none;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;

    /* Увеличиваем кликабельную область */
    min-width: 30px;
    height: 45px;
    padding: 0 5px;

    /* Компенсация кликабельной области,
    чтобы можно было выравнивать по контуру */
    margin-top: -10px;
    margin-bottom: -9px;

    /* В журнале по умолчанию всем элементам ставится border-box */
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}

.bubble--1dzpk[data-inline='true'] {
    min-width: 25px;
    height: 30px;
    margin: -5px -5px;
    vertical-align: bottom;
}

.bubble--1dzpk[data-hovered='true'] {
    color: rgb(var(--surface-on-hover));
}

@media (hover: hover) {
    .bubble--1dzpk[href]:hover {
        color: rgb(var(--surface-on-hover));
    }
}

.icon---WxBW {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.icon---WxBW svg {
    vertical-align: top;
}

.content--0D9eh {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    margin-top: 1px;

    /* Для вертикального выравнивания */
    line-height: 15px;
}

.content--0D9eh[data-dots='true'] {
    font-weight: bold;
    margin-left: 1px;
}

.bubble--1dzpk[data-inline='true'] .content--0D9eh {
    /* Для вертикального выравнивания */
    line-height: 16px;
}

.bubble--1dzpk[data-inline='true'] .content--0D9eh, .bubble--1dzpk[data-inline='false'][data-size='small'] .content--0D9eh {
    margin-top: 0;
}

.bubble--1dzpk[data-inline='false'][data-size='large'] .content--0D9eh, .bubble--1dzpk[data-inline='true'][data-size='large'] .content--0D9eh, .bubble--1dzpk[data-inline='true'][data-size='medium'] .content--0D9eh {
    margin-left: 1px;
}

.bubble--1dzpk[data-inline='false'][data-size='medium'] .content--0D9eh {
    margin-left: 2px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.body-primary--J3hv4 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}

@media (min-width: 760px) {

.body-primary--J3hv4 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }

.body-secondary--8Vwl2 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}

@media (min-width: 760px) {

.body-secondary--8Vwl2 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }

.body-large--3h-iF {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.body-large-bold--09fzR {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body-medium--xOlid, .favorites--3VMQU {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}

.body-medium-bold--ycw8E {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}

.body-small--t2dem {
    font: 13px/15px Graphik;
    font: var(--body-small);
}

.body-small-bold--Mf2e7 {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}

.favorites--3VMQU {
    color: rgb(var(--surface-on-#000));
    color: rgb(var(--surface-on-initial));
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    cursor: pointer;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;

    /* Отключает стандартные стили кнопки */
    background-color: transparent;
    border: none;
    -webkit-appearance: none;

    /* Увеличиваем кликабельную область */
    height: 45px;
    min-width: 28px;
    padding-left: 8px;
    padding-right: 4px;

    /* Компенсация кликабельной области,
    чтобы можно было выравнивать по контуру */
    margin: -10px 0;
}

@media (hover: hover) {
    .favorites--3VMQU:hover {
        color: rgb(var(--surface-on-hover));
    }
}

.icon--y283X {
    padding-right: 7px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.icon--y283X svg {
    fill: none;
}

.icon--y283X[data-fill='true'] svg {
    fill: currentColor;
}

.counter--t2vZ4 {
    margin-top: 2px;
}

.meta--aAvO3 {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;

    /* Чтобы при клике на иконки,
     мета не выделялась голубым на Android */
    -webkit-tap-highlight-color: transparent;
}

/* stylelint-disable at-rule-no-unknown, value-keyword-case */
.card--Nlr4W {
    display: inline-block;
    position: relative;
    width: 240px;
    padding-bottom: 10px;
}
.link--\+\+vTQ {
    color: rgb(var(--surface-on-primary));
    text-decoration: none;
    -webkit-user-drag: none;
}
@media (hover: hover) {
    .link--\+\+vTQ:hover {
        color: rgb(var(--surface-on-hover));
    }
}
.link--\+\+vTQ::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.imageWrapper--QxfnA {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}
.imageWrapper--QxfnA[data-default-bg='true'] {
    background: rgb(var(--border-surface));
}
/* Делаем картинки резиновыми, ширина будет занимать 100%.
Для того, чтобы высота изменялась пропорционально,
добавляем родителю псевдоэлемент с паддингом,
величина которого зависит от ширины.
Псевдоэлемент растягивает imageWrapper,
а картинка позиционируется абсолютно относительно imageWrapper
и растягивается на 100% по высоте и ширине */
.imageWrapper--QxfnA::before {
    content: '';
    display: block;
    height: 0;
    padding-bottom: calc((110 / 240) * 100%);
}
.bg--wcf9H {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.image--RsagM {
    --image-margin: 5px;

    position: absolute;
    top: var(--image-margin);
    left: 0;
    width: 100%;
    height: calc(100% - 2 * (var(--image-margin)));
}
.image--RsagM[data-image-type='cookie'] {
    height: calc((110 / 170) * 100%);
    top: 17.5%;
}
.image--RsagM[data-image-type='flow'] {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    overflow: hidden;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.title--49Xrl {
    margin-bottom: 10px;
    word-break: break-word;
}
.meta--g-Ohk {
    position: relative;
    z-index: 1;
}
/* stylelint-enable at-rule-no-unknown, value-keyword-case */

@-webkit-keyframes rotate--nylTq {
    from {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes rotate--nylTq {
    from {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@-webkit-keyframes skeletonAnimate--KY6DU {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.5;
    }
}

@keyframes skeletonAnimate--KY6DU {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.5;
    }
}

.skeletonCard--rDXZC {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-name: skeletonAnimate--KY6DU;
            animation-name: skeletonAnimate--KY6DU;
    -webkit-animation-duration: 2000ms;
            animation-duration: 2000ms;
}

.imgSkeleton--yHWPr {
    width: 240px;
    height: 110px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.titleSkeleton--MEFuv {
    width: 150px;
    height: 15px;
    margin-bottom: 10px;
}

.metaSkeleton--L4dsr {
    width: 100px;
    height: 15px;
}

.imgSkeleton--yHWPr, .titleSkeleton--MEFuv, .metaSkeleton--L4dsr {
    background-color: var(--surface-on-disabled);
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
/* stylelint-disable at-rule-no-unknown, value-keyword-case */
.avatars--N8apC {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    vertical-align: top;
}
.container--PGlrl {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.container--PGlrl[data-visible='false'] {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
}
.avatar--HROdR {
    width: 25px;
    height: 25px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.avatar--HROdR:not(:first-child) {
    margin-left: -6px;
}
@media (min-width: 760px) {
.avatars--N8apC[data-size='medium'] .avatar--HROdR {
        width: 30px;
        height: 30px
}
    }
.avatars--N8apC[data-size='large'] .avatar--HROdR {
    width: 40px;
    height: 40px;
}
@media (min-width: 760px) {
.avatars--N8apC[data-size='medium'] .avatar--HROdR:not(:first-child) {
        margin-left: -7px
}
    }
.avatars--N8apC[data-size='large'] .avatar--HROdR:not(:first-child) {
    margin-left: -10px;
}
.avatar--HROdR[data-placeholder='true'] {
    color: rgb(var(--border-surface));
}
.avatar--HROdR[data-placeholder='true']:last-child {
    background: rgb(var(--border-surface));
}
.avatar--HROdR[data-placeholder='true'] svg {
    max-width: 100%;
    max-height: 100%;
}
.image--g50HN {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.mask--YP-XG {
    /* Для Safari */
    height: 0;
}
/* stylelint-enable at-rule-no-unknown, value-keyword-case */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--R8RcJ, .h1--UmXyK {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--R8RcJ, .h1--UmXyK {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--d0WSc, .h2--EootN, .title--MoY-\+ {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--d0WSc, .h2--EootN, .title--MoY-\+ {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--QZbVD, .h3--bWio2 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--Dw2CI, .h4--DTy01 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--Dw2CI, .h4--DTy01 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--MogeU, .h5--iwdBw {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--f62Gy, .h6--VvI-T {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--f62Gy, .h6--VvI-T {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.root--r0Dab {
    text-align: center;
}

.avatarsWrapper--7q-B7 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 19px;
}

.title--MoY-\+ {
    margin: 0 auto 5px
}

@media (min-width: 768px) {

.title--MoY-\+ {
        padding: 0 var(--bodyTabletPaddingUrania)
}
    }

.text--H\+rps {
    max-width: 450px;
    margin: 0 auto 14px;
    padding: 0 10px;
    font: 15px/20px Graphik;
    font: var(--interface-caption);
    color: rgb(var(--surface-on-placeholder))
}

@media (min-width: 768px) {

.text--H\+rps {
        padding: 0 30px
}
    }

.link--LNkAb {
    display: inline-block;
    font: 15px/20px Graphik;
    font: var(--body-medium);
    padding: 6px 15px 4px;
    border-radius: 5px;
    color: var(--color-neutral-primary-on-inverted);
    background-color: rgb(var(--button-secondary));
    text-decoration: none;
}

.avatarsTopWrapper--IST7O {
    margin-bottom: 7px;
}

@media (hover: hover) {
    .link--LNkAb:hover {
        background-color: rgb(var(--button-secondary-hover));
    }
}


    @media (min-width: 768px) {

.root--z87gk {
        -webkit-columns: 2;
           -moz-columns: 2;
                columns: 2;
        -webkit-column-gap: 30px;
           -moz-column-gap: 30px;
                grid-column-gap: 30px;
                column-gap: 30px
}
    }

.teamsItem--NXxwu {
    font: var(--body-medium);
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
}

.teamsItem--NXxwu:not(:last-child) {
    margin-bottom: 40px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--Ht3yT, .h1--7WBDn {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--Ht3yT, .h1--7WBDn {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--Dx2kn, .h2--StDkg {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--Dx2kn, .h2--StDkg {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--4wpmM, .h3--fiuZD {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--K\+JXo, .h4--XZgKP {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--K\+JXo, .h4--XZgKP {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--YdzFi, .h5--1Uq7E {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--rSAV-, .h6--81xHc {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--rSAV-, .h6--81xHc {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.root--PEtpO {
    -webkit-animation-name: showCoursePage--Zio\+z;
            animation-name: showCoursePage--Zio\+z;
    -webkit-animation-duration: 2000ms;
            animation-duration: 2000ms;
    max-width: var(--urania-max-content-width);
    margin: 0 auto;
}

@-webkit-keyframes showCoursePage--Zio\+z {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 40px);
                transform: translate(0, 40px);
    }
    50% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    100% {
        opacity: 1;
    }
}

@keyframes showCoursePage--Zio\+z {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 40px);
                transform: translate(0, 40px);
    }
    50% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    100% {
        opacity: 1;
    }
}

.root--JmXrW {
    max-width: 700px;
    margin: 40px auto 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    color: #000;
    color: initial
}

@media (min-width: 768px) {

.root--JmXrW {
        margin-top: 80px
}
    }

.root--JmXrW .__quiz-step {
    padding: 25px 0 35px;
    border-radius: 4px;
    margin-top: 15px
}

@media (min-width: 768px) {

.root--JmXrW .__quiz-step {
        padding: 35px 0 60px;
        margin-top: 30px
}
    }

.root--JmXrW .__quiz-step [data-next-step-button-wrapper='true'] {
    margin-bottom: -20px
}

@media (min-width: 768px) {

.root--JmXrW .__quiz-step [data-next-step-button-wrapper='true'] {
        margin-bottom: -35px
}
    }

.root--JmXrW.withDiplomaButton--XscWV .__quiz-step:last-child {
    border-radius: 4px 4px 0 0;
}

.root--apum4 {
    background-color: var(--colorWhite);
    border-radius: 4px;
}

.root--apum4.isTransparent--adbJT {
    background-color: transparent;
}

.root--apum4 .__quiz-step a {
    text-decoration: none;
    outline-offset: 2px;
    outline-width: 2px;
    outline-color: rgba(4, 85, 119, 0.25);
    color: #045577;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 85, 119, 0.13)), to(rgba(4, 85, 119, 0.13)));
    background-image: linear-gradient(rgba(4, 85, 119, 0.13), rgba(4, 85, 119, 0.13));
    background-repeat: repeat-x;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 2px;
}

@media (hover: hover) {
    .root--apum4 .__quiz-step a:hover {
        color: #bd1d00;
    }
}

.button--l\+nyf {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    background-color: var(--color-button-bg-default);
    border: 1px solid var(--color-button-bg-default);
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    width: 100%;
    height: 50px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--grotesque-font);
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 25px;
    -webkit-transition: all ease-in-out var(--transition-duration-hover);
    transition: all ease-in-out var(--transition-duration-hover);
    -webkit-transition-property: background-color, border;
    transition-property: background-color, border;
    outline: none
}

@media (min-width: 768px) {

.button--l\+nyf {
        height: 55px;
        font-size: 21px;
        line-height: 30px
}
    }

.button--l\+nyf.focus-visible--GcGNo, .button--l\+nyf:active {
    -webkit-transition: all ease-in-out var(--transition-duration-default);
    transition: all ease-in-out var(--transition-duration-default);
    outline: none;
    background-color: var(--color-button-bg-focus);
    border: 1px solid var(--color-button-bg-focus);
}

.button--l\+nyf:focus-visible, .button--l\+nyf:active {
    -webkit-transition: all ease-in-out var(--transition-duration-default);
    transition: all ease-in-out var(--transition-duration-default);
    outline: none;
    background-color: var(--color-button-bg-focus);
    border: 1px solid var(--color-button-bg-focus);
}

.button--l\+nyf:disabled {
    opacity: 0.5;
    cursor: default;
}

.button--l\+nyf:disabled.focus-visible--GcGNo, .button--l\+nyf:disabled:active {
    background-color: var(--color-button-bg-default);
    border: 1px solid var(--color-button-bg-default);
}

.button--l\+nyf:disabled:focus-visible, .button--l\+nyf:disabled:active {
    background-color: var(--color-button-bg-default);
    border: 1px solid var(--color-button-bg-default);
}

.textWrap--4P1Z1 {
    color: var(--colorWhite);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (hover: hover) {
    .button--l\+nyf:hover {
        -webkit-transition: all ease-in-out var(--transition-duration-default);
        transition: all ease-in-out var(--transition-duration-default);
        background-color: var(--color-button-bg-hover);
        border: 1px solid var(--color-button-bg-hover);
    }

    .button--l\+nyf:disabled:hover {
        background-color: var(--color-button-bg-default);
        border: 1px solid var(--color-button-bg-default);
    }
}

.examButtonBlock--ci7gb {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
}

.nextAttemptDateText--EiXhq {
    font-size: 14px;
    font-family: var(--grotesque-font);
    line-height: 20px;
    color: var(--colorWhite);
    opacity: 0.6;
    text-align: center;
    margin-top: 10px
}

@media (min-width: 768px) {

.nextAttemptDateText--EiXhq {
        margin-top: 15px
}
    }

.root--sPGT7 {
    font-family: var(--serif-font);
    font-size: 17px;
    line-height: 25px
}

@media (min-width: 768px) {

.root--sPGT7 {
        font-size: 21px;
        line-height: 30px
}
    }

.root--sPGT7 h2 {
    font-family: var(--grotesque-font);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 25px
}

@media (min-width: 768px) {

.root--sPGT7 h2 {
        font-size: 23px;
        line-height: 30px
}
    }

.root--sPGT7 p {
    margin-top: 0;
    margin-bottom: 25px
}

@media (min-width: 768px) {

.root--sPGT7 p {
        margin-bottom: 31px
}
    }

.root--sPGT7 b, .root--sPGT7 strong {
    font-family: var(--grotesque-font);
    font-size: 15px
}

@media (min-width: 768px) {

.root--sPGT7 b, .root--sPGT7 strong {
        font-size: 19px
}
    }

[dir="ltr"] .root--sPGT7 ul {
            margin-left: 0
}

[dir="rtl"] .root--sPGT7 ul {
            margin-right: 0
}

[dir="ltr"] .root--sPGT7 ul {
            margin-right: 0
}

[dir="rtl"] .root--sPGT7 ul {
            margin-left: 0
}

[dir="ltr"] .root--sPGT7 ul {
            padding-left: 0
}

[dir="rtl"] .root--sPGT7 ul {
            padding-right: 0
}

.root--sPGT7 ul {
    list-style-type: none;
    font-size: 17px;
    line-height: 25px;

    /* Существуют языки с направлением текста с права налево (RTL).
     Чтобы списки в таких языках выглядели хорошо современные браузеры
     проставляют отступы привязанные к writing-mode.
     Нам это не нужно, потому обнуляем эти свойства на всякий случай. */
    -webkit-margin-before: 0;
            margin-top: 0;
    -webkit-margin-after: 0;
            margin-bottom: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0
}

@media (min-width: 768px) {

.root--sPGT7 ul {
        font-size: 21px;
        line-height: 30px
}
    }

.root--sPGT7 ul > li {
    position: relative;
    padding-left: 22px
}

@media (min-width: 768px) {

.root--sPGT7 ul > li {
        padding-left: 30px
}
    }

.root--sPGT7 ul > li:not(:last-child) {
    margin-bottom: 1em;
}

.root--sPGT7 ul > li > span {
    display: inline-block;
    position: absolute;
    left: 0;
}

.root--sPGT7 ul > li > span > img {
    height: 1em;
    vertical-align: middle;
}

.examBody--sL0Ac {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    margin-bottom: 15px
}

@media (min-width: 768px) {

.examBody--sL0Ac {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 25px;
        margin-bottom: 30px
}
    }

.imageWrapper--5YppV {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 51px
}

@media (min-width: 768px) {

.imageWrapper--5YppV {
        margin-bottom: 49px
}
    }

.image--0C1GF {
    height: 212px;
    margin-top: -38px
}

@media (min-width: 768px) {

.image--0C1GF {
        margin-top: -54px;
        height: 445px
}
    }

.header--KaJho {
    width: 100%;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 30px
}

@media (min-width: 768px) {

.header--KaJho {
        margin-bottom: 44px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse
}
    }

.headerSpacer--w4k2v {
    height: 10px;
}

.headerTitle--ibWg1 {
    font-family: var(--grotesque-font);
    font-size: 24px;
    line-height: 30px;
    margin: 0
}

@media (min-width: 768px) {

.headerTitle--ibWg1 {
        font-size: 36px;
        line-height: 40px
}
    }

.headerBadgeLink--qAzCU {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--colorBlack);
    display: inline;
    border-bottom: 1px solid rgba(0, 0, 0, 0.13);
    padding-bottom: 1px;
    cursor: pointer;
    -webkit-transition: color ease-in-out var(--transition-duration-hover);
    transition: color ease-in-out var(--transition-duration-hover);
    font-size: 10px;
    line-height: 15px
}

@media (min-width: 768px) {

.headerBadgeLink--qAzCU {
        font-size: 12px;
        line-height: 20px
}
    }

.main--RbRQ1 {
    margin-bottom: 55px;
}

.examControls--Iv0XU {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.examDisabledButton--2Ny7q {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 45px;
    color: var(--color-button-bg-default);
}

.examDisabledButtonText--\+dgyY {
    font-family: var(--grotesque-font);
    font-size: 17px;
    font-weight: bold;
    line-height: 20px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    text-align: center;
}

.examButton--\+SbMk {
    /* Кнопка экзамена на странице курса и кнопка экзамена на странице экзамена
     хоть и выглядят похоже на самом деле чуть-чуть различаются. По хорошему
     нужно пробрасывать размер кнопки внутрь компонента экзамена, либо
     сделать строку с таймером отдельным компонентом. А лучше, конечно,
     стандартизировать кнопки.
     TODO: Привести кнопки в порядок
   */
    height: auto;
    min-height: 45px;
    font-size: 17px;
    line-height: 20px;
    font-weight: bold;
    border-radius: 2px;
    padding: 6px 15px
}

@media (min-width: 768px) {

.examButton--\+SbMk {
        min-width: 200px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
}
    }

@media (hover: hover) {
    .headerBadgeLink--qAzCU:hover {
        -webkit-transition: color ease-in-out var(--transition-duration-default);
        transition: color ease-in-out var(--transition-duration-default);
        color: rgba(0, 0, 0, 0.5);
    }
}

.root--x9jNZ p {
    padding: 0;
    word-wrap: break-word;
    margin-top: 0;
    margin-bottom: 20px;
}

.root--x9jNZ ol {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 24px;
}

.root--x9jNZ ol li {
    margin-bottom: 8px;
    margin-left: 25px
}

@media (min-width: 768px) {

.root--x9jNZ ol li {
        margin-bottom: 10px
}
    }

.diplomaButtonWrapper--qo9Qn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 10px;
    padding-bottom: 15px;
    border-radius: 0 0 4px 4px;
    background-color: var(--colorWhite)
}

@media (min-width: 768px) {

.diplomaButtonWrapper--qo9Qn {
        padding-top: 7px;
        padding-bottom: 30px
}
    }

.diplomaButton--YuAry {
    border: none;
    padding: 13px 15px;
    min-width: 220px;
    font-size: 17px;
    line-height: 20px;
    margin: 0 10px;
    min-height: 50px;
    height: auto
}

@media (min-width: 768px) {

.diplomaButton--YuAry {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0
}
    }

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.title--q8M0G {
    font: bold 32px/35px Graphik;
    font: var(--title-mobile)
}

@media (min-width: 760px) {

.title--q8M0G {
        font: bold 45px/50px Graphik;
        font: var(--title-desktop)
}
    }

.subtitle--OeDCG, .notFoundSubtitle--\+gI2q {
    font: 24px/30px Graphik;
    font: var(--subtitle-mobile)
}

@media (min-width: 760px) {

.subtitle--OeDCG, .notFoundSubtitle--\+gI2q {
        font: 30px/35px Graphik;
        font: var(--subtitle-desktop)
}
    }

.root--qjkG9 {
    max-width: var(--urania-max-content-width);
    padding-top: 30px;
    margin: 0 auto
}

@media (min-width: 768px) {

.root--qjkG9 {
        padding-top: 50px
}
    }

.coursesCarouselWrapper--VXCXy, .recommendedCoursesWrapper--VXkQ3:not(:last-child) {
    margin-bottom: 20px;
}

.notFoundImage--Rlppr {
    display: block;
    margin: 0 auto 32px;
    width: 166px;
    height: 210px
}

@media (min-width: 768px) {

.notFoundImage--Rlppr {
        width: 245px;
        height: 310px;
        margin-bottom: 40px
}
    }

.notFoundSubtitle--\+gI2q {

    max-width: 500px;
    margin: 0 auto 50px;
    color: var(--surface-on-disabled);
    text-align: center
}

@media (min-width: 768px) {

.notFoundSubtitle--\+gI2q {
        margin-bottom: 60px
}
    }

.titleImageWrap--EeGqF {
    position: absolute;
    width: 100vw;
    height: 240px;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin-top: -50px;
    overflow: hidden
}

@media (min-width: 768px) {

.titleImageWrap--EeGqF {
        height: 500px;
        margin-top: -85px
}
    }

.smallImageWrap--sD6G3 {
    position: relative;
    height: 100px;
    margin: -5px 0 15px;
    padding: 0
}

@media (min-width: 768px) {

.smallImageWrap--sD6G3 {
        height: 150px;
        width: auto;
        margin: -15px 0 15px
}
    }

.titleImage--lvQeK {
    height: 100%;
    width: auto;
    max-width: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
}

.smallImageWrap--sD6G3 .titleImage--lvQeK {
    height: 100px
}

@media (min-width: 768px) {

.smallImageWrap--sD6G3 .titleImage--lvQeK {
        height: 150px
}
    }

.title--m4-h8 {
    font-family: var(--grotesque-font);
    font-style: normal;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 30px
}

@media (min-width: 768px) {

.title--m4-h8 {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: 0
}
    }

.headingWrap--HGZ3o {
    text-align: center;
    padding: 0
}

@media (min-width: 768px) {

.headingWrap--HGZ3o {
        position: relative;
        padding: 30px 0 0
}
    }

.breadCrumbs--M6A1i {
    font-size: 10px;
    line-height: 15px;
    text-transform: uppercase;
    letter-spacing: 1px
}

@media (min-width: 768px) {

.breadCrumbs--M6A1i {
        font-size: 12px;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center
}
    }

.breadCrumbsLink--Z0bFz {
    text-decoration: none;
    color: var(--colorBlack);
    display: inline;
    border-bottom: 1px solid rgba(0, 0, 0, 0.13);
    padding-bottom: 1px;
    cursor: pointer;
    -webkit-transition: color ease-in-out var(--transition-duration-hover);
    transition: color ease-in-out var(--transition-duration-hover);
}

.lessonTitle--l\+U1O::before {
    display: inline-block;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 5px;
    content: '•';
}

.description--sj0N5 {
    font-family: var(--serif-font);
    font-size: 17px;
    line-height: 25px;
    margin-top: 30px
}

@media (min-width: 768px) {

.description--sj0N5 {
        font-size: 21px;
        line-height: 30px;
        margin-top: 45px
}
    }

.quizWrap--\+pEJ4 h2 {
    font-family: var(--grotesque-font);
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 25px;
    margin-top: 25px;
    margin-bottom: 15px
}

@media (min-width: 768px) {

.quizWrap--\+pEJ4 h2 {
        font-size: 24px;
        line-height: 30px;
        letter-spacing: -0.2px;
        margin-top: 60px;
        margin-bottom: 10px
}
    }

.quizWrap--\+pEJ4 p {
    font-size: 17px;
    line-height: 25px
}

@media (min-width: 768px) {

.quizWrap--\+pEJ4 p {
        font-size: 21px;
        line-height: 30px
}
    }

.quizWrap--\+pEJ4 p:last-child, .description--sj0N5 p:last-child {
    margin-bottom: 0;
}

.quizWrap--\+pEJ4 a, .description--sj0N5 a {
    text-decoration: none;
    outline-offset: 2px;
    outline-width: 2px;
    outline-color: rgba(4, 85, 119, 0.25);
    color: #045577;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 85, 119, 0.13)), to(rgba(4, 85, 119, 0.13)));
    background-image: linear-gradient(rgba(4, 85, 119, 0.13), rgba(4, 85, 119, 0.13));
    background-repeat: repeat-x;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 2px;
}

.quizWrap--\+pEJ4 mark {
    background-color: #fffea6;
}

.bodyPre--E3OA5 {
    background-color: var(--colorWhite);
    position: relative;
    padding: 25px 10px 35px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

@media (min-width: 768px) {

.bodyPre--E3OA5 {
        padding: 35px 20px 60px
}
    }

.bodyPre--E3OA5.withBigImage--aINaW {
    padding-top: 225px
}

@media (min-width: 768px) {

.bodyPre--E3OA5.withBigImage--aINaW {
        padding-top: 425px
}
    }

.bodyPre--E3OA5.withVerticalSpacings--tAQkK {
    border-radius: 4px;
}

@media (hover: hover) {
    .quizWrap--\+pEJ4 a:hover, .description--sj0N5 a:hover {
        color: #bd1d00;
    }

    .breadCrumbsLink--Z0bFz:hover {
        -webkit-transition: color ease-in-out var(--transition-duration-default);
        transition: color ease-in-out var(--transition-duration-default);
        color: rgba(0, 0, 0, 0.5);
    }
}

.root--mvBMN {
    background-color: var(--color-urania-background);
    border: 1px solid rgba(255, 255, 255, 0.4);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative;
    padding: 15px 110px 20px 15px;
    min-height: 150px;
    overflow: hidden;
    color: var(--colorWhite);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none
}

@media (min-width: 768px) {

.root--mvBMN {
        min-height: 170px;
        padding: 20px 210px 30px 20px
}
    }

.root--mvBMN.isLink--Qm3sA {
    cursor: pointer;
    text-decoration: none;
}

.root--mvBMN.disabled--wb1rA {
    cursor: default;
    background: #2b2c2b;
}

.title--4kfJq {
    color: var(--colorWhite);
    display: block;
    font-weight: normal;
    font-size: 20px;
    line-height: 25px;
    margin: 0
}

@media (min-width: 768px) {

.title--4kfJq {
        font-size: 28px;
        line-height: 35px
}
    }

.subTitle--fKT7n {
    color: var(--colorWhite);
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    margin: 0 0 5px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: normal;
}

.root--mvBMN.finished--Ojfpb .subTitle--fKT7n {
    color: #1ed730;
}

.root--mvBMN.disabled--wb1rA .title--4kfJq, .root--mvBMN.disabled--wb1rA .subTitle--fKT7n {
    color: rgba(255, 255, 255, 0.4);
}

.ctaButton--9Vv59 {
    width: auto;
    min-width: 130px;
    height: 40px;
    margin-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 17px;
    line-height: 25px;
    white-space: nowrap;
}

.aside--Eeo9p {
    width: 130px;
    height: 130px;
    text-align: center;
    position: absolute;
    /* Чуть выносим картинку за пределы контейнера (так надо по дизайну) */
    right: -40px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%)
}

@media (min-width: 768px) {

.aside--Eeo9p {
        right: 45px
}
    }

.date--vW0Jl {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-transform: uppercase;
}

.dateDay--IYYVN {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    font-size: 55px;
    line-height: 50px;
    letter-spacing: 1px;
    text-transform: uppercase
}

@media (min-width: 768px) {

.dateDay--IYYVN {
        font-size: 70px;
        line-height: 60px
}
    }

.dateMonth--zIYZV {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.img--iOEin {
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
}

.root--mvBMN.disabled--wb1rA .img--iOEin {
    opacity: 0.4;
}

.icon--C277- {
    display: inline-block;
    background: no-repeat center center;
    background-size: contain;
    height: 13px;
    vertical-align: middle;
    margin-right: 8px;
}

.root--mvBMN.disabled--wb1rA .icon--C277- {
    width: 10px;
    margin-top: -5px;
}

.root--mvBMN.finished--Ojfpb .icon--C277- {
    width: 13px;
    margin-top: -3px;
}

@media (hover: hover) {
    .root--mvBMN:hover .ctaButton--9Vv59 {
        -webkit-transition: all ease-in-out var(--transition-duration-default);
        transition: all ease-in-out var(--transition-duration-default);
        background-color: var(--color-button-bg-hover);
        border: 1px solid var(--color-button-bg-hover);
    }
}

.root--1j9Ye {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px
}
@media (min-width: 768px) {
    .root--1j9Ye {
        font-size: 17px;
        line-height: 25px
}
    }

.formWrapper--JS07b {
    margin-top: 40px;
}

.info--t\+7h6 {
    margin-top: 30px;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 15px 15px 20px;
    color: var(--colorBlack)
}

@media (min-width: 768px) {

.info--t\+7h6 {
        margin-top: 35px;
        padding: 20px 40px 25px 20px
}
    }

.infoTitle---iF0D {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 20px;
    line-height: 25px;
    font-weight: var(--fontWeightBold)
}

@media (min-width: 768px) {

.infoTitle---iF0D {
        font-size: 28px;
        line-height: 35px
}
    }

.root--mdqvd {
    position: relative;
    background: var(--colorWhite);
    border: 1px solid #e5e5e5;
    border-radius: 17px;
    height: 30px;
    padding: 0 15px;
    font-weight: 600;
    font-size: 13px;
    line-height: 15px
}

@media (min-width: 768px) {

.root--mdqvd {
        height: 35px;
        font-size: 17px;
        line-height: 25px
}
    }

.root--mdqvd::after {
    content: '';
    display: block;
    position: absolute;
    width: 13px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3csvg width='13' height='11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0)'%3e%3cpath d='M6.905 0C6.064 3.404 4.298 7.68.599 10.253-.284 10.876 8.502 10.279 13 7' fill='white'/%3e%3cpath d='M1.377 11a3.382 3.382 0 01-.998-.104l-.284-.124L0 10.377a.596.596 0 01.284-.56C3.868 7.357 5.56 3.175 6.306.052V0h.567l.484.498a17.51 17.51 0 01-5.518 9.464C4.12 9.827 9.452 8.762 12.5 6.5l.7.5-.231.503C9.459 10.056 3.773 11 1.377 11z' fill='%23E5E5E5'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0'%3e%3cpath fill='white' d='M0 0h13v11H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    bottom: -1.5px;
    left: -5.5px;
}

.text--ra7Ss {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.image--qfv4M {
    -webkit-filter: drop-shadow(0px 10px 10px rgba(2, 0, 21, 0.22));
            filter: drop-shadow(0px 10px 10px rgba(2, 0, 21, 0.22));
}

.image--qfv4M:nth-child(1) {
    width: 42px;
    height: 42px;
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px)
}

@media (min-width: 768px) {

.image--qfv4M:nth-child(1) {
        width: 70px;
        height: 70px;
        -webkit-transform: translateY(-1px);
                transform: translateY(-1px)
}
    }

.image--qfv4M:nth-child(2) {
    width: 50px;
    height: 50px;
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px)
}

@media (min-width: 768px) {

.image--qfv4M:nth-child(2) {
        width: 80px;
        height: 80px;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px)
}
    }

.image--qfv4M:nth-child(3) {
    width: 60px;
    height: 60px;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px)
}

@media (min-width: 768px) {

.image--qfv4M:nth-child(3) {
        width: 100px;
        height: 100px;
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px)
}
    }

.image--qfv4M:nth-child(4) {
    width: 72px;
    height: 72px;
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px)
}

@media (min-width: 768px) {

.image--qfv4M:nth-child(4) {
        width: 120px;
        height: 120px;
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px)
}
    }

.image--qfv4M:nth-child(5) {
    width: 85px;
    height: 85px;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px)
}

@media (min-width: 768px) {

.image--qfv4M:nth-child(5) {
        width: 140px;
        height: 140px;
        -webkit-transform: translateY(-40px);
                transform: translateY(-40px)
}
    }

@-webkit-keyframes shake--yzFJw {
    0%, to {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
    }

    25%, 75% {
        -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake--yzFJw {
    0%, to {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
    }

    25%, 75% {
        -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
    }
}

.handlePoint--nCv-P {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-animation-name: shake--yzFJw;
            animation-name: shake--yzFJw;
}

.handlePointImgWrap--6uKbQ {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.handlePointImgWrap--6uKbQ[data-is-animated='true'] {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
}

@media (hover: hover) {
    .handlePointImgWrap--6uKbQ:hover {
        -webkit-animation-name: shake--yzFJw;
                animation-name: shake--yzFJw;
    }
}

.rc-slider--fD8gU {
  position: relative;
  height: 14px;
  padding: 5px 0;
  width: 100%;
  border-radius: 6px;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider--fD8gU * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail--4X9E4 {
  position: absolute;
  width: 100%;
  background-color: #e9e9e9;
  height: 4px;
  border-radius: 6px;
}
.rc-slider-track--nY28i {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 6px;
  background-color: #abe2fb;
}
.rc-slider-handle--2N792 {
  position: absolute;
  margin-left: -7px;
  margin-top: -5px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  cursor: -webkit-grab;
  cursor: grab;
  border-radius: 50%;
  border: solid 2px #96dbfa;
  background-color: #fff;
  -ms-touch-action: pan-x;
      touch-action: pan-x;
}
.rc-slider-handle--2N792:focus {
  border-color: #57c5f7;
  -webkit-box-shadow: 0 0 0 5px #96dbfa;
          box-shadow: 0 0 0 5px #96dbfa;
  outline: none;
}
.rc-slider-handle-click-focused--6JzRC:focus {
  border-color: #96dbfa;
  -webkit-box-shadow: unset;
          box-shadow: unset;
}
.rc-slider-handle--2N792:hover {
  border-color: #57c5f7;
}
.rc-slider-handle--2N792:active {
  border-color: #57c5f7;
  -webkit-box-shadow: 0 0 5px #57c5f7;
          box-shadow: 0 0 5px #57c5f7;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.rc-slider-mark--cvzpm {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  font-size: 12px;
}
.rc-slider-mark-text--fV4m5 {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  color: #999;
}
.rc-slider-mark-text-active--iaHMR {
  color: #666;
}
.rc-slider-step--e5SNX {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}
.rc-slider-dot--zGhax {
  position: absolute;
  bottom: -2px;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid #e9e9e9;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  vertical-align: middle;
}
.rc-slider-dot-active--TM\+kN {
  border-color: #96dbfa;
}
.rc-slider-disabled--E-w7W {
  background-color: #e9e9e9;
}
.rc-slider-disabled--E-w7W .rc-slider-track--nY28i {
  background-color: #ccc;
}
.rc-slider-disabled--E-w7W .rc-slider-handle--2N792, .rc-slider-disabled--E-w7W .rc-slider-dot--zGhax {
  border-color: #ccc;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: #fff;
  cursor: not-allowed;
}
.rc-slider-disabled--E-w7W .rc-slider-mark-text--fV4m5, .rc-slider-disabled--E-w7W .rc-slider-dot--zGhax {
  cursor: not-allowed !important;
}
.rc-slider-vertical--VAwcH {
  width: 14px;
  height: 100%;
  padding: 0 5px;
}
.rc-slider-vertical--VAwcH .rc-slider-rail--4X9E4 {
  height: 100%;
  width: 4px;
}
.rc-slider-vertical--VAwcH .rc-slider-track--nY28i {
  left: 5px;
  bottom: 0;
  width: 4px;
}
.rc-slider-vertical--VAwcH .rc-slider-handle--2N792 {
  margin-left: -5px;
  margin-bottom: -7px;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}
.rc-slider-vertical--VAwcH .rc-slider-mark--cvzpm {
  top: 0;
  left: 18px;
  height: 100%;
}
.rc-slider-vertical--VAwcH .rc-slider-step--e5SNX {
  height: 100%;
  width: 4px;
}
.rc-slider-vertical--VAwcH .rc-slider-dot--zGhax {
  left: 2px;
  margin-bottom: -4px;
}
.rc-slider-vertical--VAwcH .rc-slider-dot--zGhax:first-child {
  margin-bottom: -4px;
}
.rc-slider-vertical--VAwcH .rc-slider-dot--zGhax:last-child {
  margin-bottom: -4px;
}
.rc-slider-tooltip-zoom-down-enter--Z97hy, .rc-slider-tooltip-zoom-down-appear--5tHcZ {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: block !important;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave--jjWDQ {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: block !important;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter--Z97hy.rc-slider-tooltip-zoom-down-enter-active--\+KODv, .rc-slider-tooltip-zoom-down-appear--5tHcZ.rc-slider-tooltip-zoom-down-appear-active--N9u97 {
  -webkit-animation-name: rcSliderTooltipZoomDownIn--esa79;
          animation-name: rcSliderTooltipZoomDownIn--esa79;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave--jjWDQ.rc-slider-tooltip-zoom-down-leave-active--yX6Fe {
  -webkit-animation-name: rcSliderTooltipZoomDownOut--tc-NV;
          animation-name: rcSliderTooltipZoomDownOut--tc-NV;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter--Z97hy, .rc-slider-tooltip-zoom-down-appear--5tHcZ {
  -webkit-transform: scale(0, 0);
          transform: scale(0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave--jjWDQ {
  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@-webkit-keyframes rcSliderTooltipZoomDownIn--esa79 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  100% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes rcSliderTooltipZoomDownIn--esa79 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  100% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@-webkit-keyframes rcSliderTooltipZoomDownOut--tc-NV {
  0% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
}
@keyframes rcSliderTooltipZoomDownOut--tc-NV {
  0% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
}
.rc-slider-tooltip--O0ctY {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: visible;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip--O0ctY * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden--2A9l8 {
  display: none;
}
.rc-slider-tooltip-placement-top--GKjBN {
  padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner--FQz4k {
  padding: 6px 2px;
  min-width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 4px #d9d9d9;
          box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow--uGFoq {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-slider-tooltip-placement-top--GKjBN .rc-slider-tooltip-arrow--uGFoq {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c;
}

.root--wRkCl {
    margin-bottom: 30px
}

@media (min-width: 768px) {

.root--wRkCl {
        margin-bottom: 35px
}
    }

.balloonWrap--ydUwr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.slider--xiXdd {
    position: relative;
    z-index: 100;
    background: none;
}

.slider--xiXdd.sliderDisabled--HxRMm {
    background: none;
}

.sliderWrap--0qWg- {
    height: 145px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative
}

@media (min-width: 768px) {

.sliderWrap--0qWg- {
        height: 200px
}
    }

.feedbackWrap--BDovn {
    width: 100%;
    margin-bottom: 47px
}

@media (min-width: 768px) {

.feedbackWrap--BDovn {
        margin-bottom: 65px
}
    }

.buttonWrap--WEZ1G {
    width: 100%
}

@media (min-width: 768px) {

.buttonWrap--WEZ1G {
        width: 200px
}
    }

.buttonWrap--WEZ1G .buttonSubmit--7tuIT {
    border-radius: 2px;
    height: 45px;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
}

.afterSubmitted--c9yII {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px
}

@media (min-width: 768px) {

.afterSubmitted--c9yII {
        -webkit-box-pack: left;
        -webkit-justify-content: left;
            -ms-flex-pack: left;
                justify-content: left
}
    }

.arrowWrap--FzKmz {
    position: absolute;
    z-index: 1;
    height: 20px;
    width: 90%;
    top: 40px;
    opacity: 1;
    -webkit-animation-name: flash--mz4Md;
            animation-name: flash--mz4Md;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite
}

@media (min-width: 768px) {

.arrowWrap--FzKmz {
        width: 45%;
        top: 55px
}
    }

.hiddenArrow--bSO0d {
    display: none;
}

.arrowLeft--eHO6z, .arrowRight---P0D4 {
    width: 30px;
    height: 20px;
    position: absolute;
    top: 0;
}

.arrowLeft--eHO6z {
    background-image: url("data:image/svg+xml,%3csvg width='30' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.032 20l3.031-2.546-6.82-5.67H30V8.216H8.242l6.821-5.67L12.032 0 0 10l12.032 10z' fill='%23E8E8E8'/%3e%3c/svg%3e");
    left: 0;
}

.arrowRight---P0D4 {
    background-image: url("data:image/svg+xml,%3csvg width='30' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.968 0l-3.031 2.546 6.82 5.67H0v3.569h21.758l-6.821 5.67L17.968 20 30 10 17.968 0z' fill='%23E8E8E8'/%3e%3c/svg%3e");
    right: 0;
}

@-webkit-keyframes flash--mz4Md {
    0%, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.4;
    }
}

@keyframes flash--mz4Md {
    0%, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.4;
    }
}

.titleWrap--S3LQP {
    text-align: center;
    margin-bottom: 60px
}

@media (min-width: 768px) {

.titleWrap--S3LQP {
        margin-bottom: 80px
}
    }

.title--ezHYh {
    font-weight: 600;
    font-size: 17px;
    line-height: 25px;
    margin-bottom: 5px
}

@media (min-width: 768px) {

.title--ezHYh {
        font-size: 23px;
        line-height: 30px
}
    }

.subtitle--PlR7I {
    font-size: 13px;
    line-height: 20px;
    max-width: 375px;
    margin: 0 auto
}

@media (min-width: 768px) {

.subtitle--PlR7I {
        font-size: 17px;
        line-height: 25px
}
    }

.textarea--UNLzt {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
    border-radius: 4px;
    width: 100%;
    min-height: 45px;
    padding: 8px 13px 6px;
    font-size: 17px;
    line-height: 25px;
    color: var(--colorBlack);
    font-family: var(--serif-font);
    -webkit-transition: border ease-in-out var(--transition-duration-hover);
    transition: border ease-in-out var(--transition-duration-hover);
    resize: none;
    outline: none;
    /* Чтобы убрать красную рамку в FF */
    -webkit-box-shadow: none;
            box-shadow: none
}

@media (min-width: 768px) {

.textarea--UNLzt {
        min-height: 50px;
        padding: 7px 14px 9px;
        font-size: 21px;
        line-height: 30px
}
    }

.textarea--UNLzt:active, .textarea--UNLzt.focus-visible--Kz-L9 {
    outline: none;
    border: 1px solid var(--color-button-bg-default);
    -webkit-transition: border ease-in-out var(--transition-duration-default);
    transition: border ease-in-out var(--transition-duration-default);
}

.textarea--UNLzt:active, .textarea--UNLzt:focus-visible {
    outline: none;
    border: 1px solid var(--color-button-bg-default);
    -webkit-transition: border ease-in-out var(--transition-duration-default);
    transition: border ease-in-out var(--transition-duration-default);
}

.textarea--UNLzt:disabled {
    opacity: 0.5;
    color: rgba(0, 0, 0, 0.35);
}

.textarea--UNLzt::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.textarea--UNLzt::-moz-placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.textarea--UNLzt:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.textarea--UNLzt::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.textarea--UNLzt::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.root--h8Ucl {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    text-align: initial;
    -webkit-appearance: none;
    color: var(--colorWhite);
    margin-bottom: 10px;
    padding: 20px 15px;
    border-radius: 10px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 0;
    background-position: right 15px top 15px;
    background-color: rgb(var(--surface-interactive))
}

@media (min-width: 359px) {

.root--h8Ucl {
        background-size: 55px
}
    }

@media (min-width: 768px) {

.root--h8Ucl {
        padding: 25px 225px 30px 20px;
        background-size: 130px;
        background-position: right 45px top 52px
}
    }

.title--8m88\+ {
    font-weight: 600;
    font-size: 21px;
    line-height: 25px;
    margin-top: 0;
    margin-bottom: 11px;
    max-width: 210px
}

@media (min-width: 768px) {

.title--8m88\+ {
        max-width: none
}
    }

.description--wDIiM {
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 29px;
}

.payMore--y4JGN {
    padding: 7px 20px 8px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 10px;
    font: var(--body-large);
    color: var(--color-neutral-primary-on);
    background-color: rgb(var(--button-primary));
}

@media (hover: hover) {
    .root--h8Ucl:hover .payMore--y4JGN {
        background-color: rgb(var(--button-primary-hover));
    }
}

.examCardWrapper--JD0ZK {
    margin-top: 30px
}
@media (min-width: 768px) {
    .examCardWrapper--JD0ZK {
        margin-top: 35px
}
    }

.lockOverflowX--YEExj {
    overflow-x: hidden;
}

.root--VefGE {
    max-width: 700px;
    margin: 40px auto 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    border-radius: 5px;
    color: #000;
    color: initial
}

@media (min-width: 768px) {

.root--VefGE {
        margin-top: 80px
}
    }

.root--VefGE .__quiz-step {
    padding: 25px 0 35px
}

@media (min-width: 768px) {

.root--VefGE .__quiz-step {
        padding: 35px 0 60px
}
    }

.root--VefGE:not(.hasVerticalSpacings--Nd6W1) .__quiz-step {
    border-radius: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.root--VefGE.hasVerticalSpacings--Nd6W1 .__quiz-step {
    border-radius: 4px;
    margin-top: 15px;
    padding-bottom: 35px
}

@media (min-width: 768px) {

.root--VefGE.hasVerticalSpacings--Nd6W1 .__quiz-step {
        margin-top: 30px;
        padding-bottom: 60px
}
    }

.root--VefGE:not(.isQuizSubmitted--qSqyB):not(.hasVerticalSpacings--Nd6W1) .__quiz-step:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.root--VefGE.hasVerticalSpacings--Nd6W1 .__quiz-step [data-next-step-button-wrapper='true'] {
    margin-bottom: -20px
}

@media (min-width: 768px) {

.root--VefGE.hasVerticalSpacings--Nd6W1 .__quiz-step [data-next-step-button-wrapper='true'] {
        margin-bottom: -35px
}
    }

.resultWrap--vdN-p {
    padding: 1px 10px 20px;
    background-color: var(--colorWhite);
    position: relative;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

@media (min-width: 768px) {

.resultWrap--vdN-p {
        padding: 1px 20px 20px
}
    }

.root--VefGE.hasVerticalSpacings--Nd6W1 .resultWrap--vdN-p {
    margin-top: 15px;
    border-radius: 4px;
    padding-top: 25px
}

@media (min-width: 768px) {

.root--VefGE.hasVerticalSpacings--Nd6W1 .resultWrap--vdN-p {
        margin-top: 30px;
        padding-top: 35px
}
    }

.root--euASM {
    color: var(--colorWhite);
    max-width: 700px;
    margin: 0 auto;
}

.title--KnO6I {
    font-weight: 600;
    font-size: 37px;
    line-height: 40px;
    text-align: center;
    margin: 24px 0 9px
}

@media (min-width: 768px) {

.title--KnO6I {
        margin-top: 61px;
        font-size: 70px;
        line-height: 80px
}
    }

.subtitle--h8hbg {
    font-size: 15px;
    line-height: 20px;
    color: rgb(var(--surface-on-secondary));
    text-align: center;
    margin: 0 0 30px
}

@media (min-width: 768px) {

.subtitle--h8hbg {
        font-size: 17px;
        line-height: 25px;
        margin-bottom: 50px
}
    }

.diplomaWrapper--1Eqjd {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    /* диплом - резиновый, 990 / 700 - соотношение его сторон */
    padding-bottom: calc(100% * 99 / 70);
    margin-bottom: 15px;
    background-color: rgb(var(--surface-primary))
}

@media (min-width: 768px) {

.diplomaWrapper--1Eqjd {
        margin-bottom: 30px
}
    }

.diploma--tp9UN {
    width: 100%;
}

.download--ebb2o {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 17px;
    line-height: 20px;
    margin: 0 auto;
    padding: 15px 40px 15px 70px;
    color: var(--color-neutral-primary-on-inverted);
    background-color: rgb(var(--button-secondary));
    border-radius: 10px;
    text-decoration: none;
}

.download--ebb2o:not(.disabled--wYL3l) {
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 41px;
    background-image: url("data:image/svg+xml,%3csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='17' width='18' height='2' rx='1' fill='white'/%3e%3crect x='9' y='13' width='13' height='2' rx='1' transform='rotate(-90 9 13)' fill='white'/%3e%3cpath d='M4 7.5l6 6 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    cursor: pointer;
}

.download--ebb2o.disabled--wYL3l {
    width: 141px;
    height: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
    opacity: var(--opacity-interactive-disabled);
    cursor: not-allowed;
}

.loadingWrapper--86z80 {
    position: absolute;
    width: 170px;
    height: 66px;
    top: calc(50% - 33px);
    left: calc(50% - 85px);
    font-size: 15px;
    line-height: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center
}

@media (min-width: 768px) {

.loadingWrapper--86z80 {
        font-size: 17px;
        line-height: 25px;
        width: 192px;
        height: 80px;
        top: calc(50% - 40px);
        left: calc(50% - 96px)
}
    }

.loadingText--50CK- {
    margin: 15px 0 0;
    opacity: 0.8;
}

@media (hover: hover) {
    .download--ebb2o:not(.disabled--wYL3l):hover {
        background-color: rgb(var(--button-secondary-hover));
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.title--SM-Cy, .titleWrapper--tOiQw {
    font: bold 32px/35px Graphik;
    font: var(--title-mobile)
}

@media (min-width: 760px) {

.title--SM-Cy, .titleWrapper--tOiQw {
        font: bold 45px/50px Graphik;
        font: var(--title-desktop)
}
    }

.subtitle--eMCiM {
    font: 24px/30px Graphik;
    font: var(--subtitle-mobile)
}

@media (min-width: 760px) {

.subtitle--eMCiM {
        font: 30px/35px Graphik;
        font: var(--subtitle-desktop)
}
    }

.root--qyT3J {
    padding-top: 20px;
}

.linksList--36qvZ {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.linkItem--uZCi2:not(:last-child) {
    margin-bottom: 10px;
}

.titleWrapper--tOiQw {
    margin-bottom: 19px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--v8nF5, .h1--VEJ7j {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--v8nF5, .h1--VEJ7j {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--HQhlp, .h2--aUazF, .title--rrN1h, .courseLinkWrapper--2-Rvn {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--HQhlp, .h2--aUazF, .title--rrN1h, .courseLinkWrapper--2-Rvn {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--F\+HHJ, .h3--Prc4j {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--k6nTq, .h4---41B7 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--k6nTq, .h4---41B7 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--OLF1W, .h5--eSOwq {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--j0Kcu, .h6--RGVk4 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--j0Kcu, .h6--RGVk4 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.root--GCmwK {
    padding-bottom: 20px;
}

.root--GCmwK[data-is-gift-clicked='true'] .cardWrapper--Ov6Xe {
    -webkit-animation-name: showGiftCard--AB-Ap;
            animation-name: showGiftCard--AB-Ap;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-duration: 1000ms;
            animation-duration: 1000ms;
}

.root--GCmwK[data-is-gift-clicked='true'] .footerTextWrapper--K97HK {
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-name: showFooterText--wUI2c;
            animation-name: showFooterText--wUI2c;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-duration: 1000ms;
            animation-duration: 1000ms;
    -webkit-animation-delay: 1000ms;
            animation-delay: 1000ms;
}

.cardWrapper--Ov6Xe {
    opacity: 0;
    position: relative;
    -webkit-box-shadow: 0 4px 30px var(--colorBlack);
            box-shadow: 0 4px 30px var(--colorBlack);
    border-radius: 15px;
    max-width: calc(100vw - 40px)
}

@media (min-width: 768px) {

.cardWrapper--Ov6Xe {
        width: 400px
}
    }

.cardContentWrapper--UpFx8 {
    padding: 0 var(--bodyMobilePaddingUrania) 19px
}

@media (min-width: 768px) {

.cardContentWrapper--UpFx8 {
        padding: 0 var(--bodyTabletPaddingUrania) 24px
}
    }

.imageWrapper--JzOsQ {
    overflow: hidden;
    height: 0;
    padding-bottom: 50%;
    margin-bottom: 16px
}

@media (min-width: 768px) {

.imageWrapper--JzOsQ {
        margin-bottom: 21px
}
    }

.image--6J9FJ {
    display: block;
    max-width: 100%;
    border-radius: 15px 15px 0 0;
}

.cardWrapper--Ov6Xe::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 7px;
    width: 70px;
    height: 70px;
    background-image: url("data:image/svg+xml,%3csvg width='70' height='71' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23a)' filter='url(%23b)'%3e%3cpath d='m35 .5 10.18 10.425 14.569-.174-.174 14.57L70 35.5 59.575 45.68l.174 14.569-14.57-.174L35 70.5 24.82 60.075l-14.569.174.174-14.57L0 35.5l10.425-10.18-.174-14.569 14.57.174L35 .5Z' fill='%2300CE33'/%3e%3cpath d='m22.702 38.83 25.114-6.729 2.899 10.819c.435 1.622.652 2.434.502 3.139a3 3 0 0 1-.926 1.605c-.536.482-1.347.7-2.97 1.134L31.48 53.043c-1.623.435-2.435.652-3.14.503a3 3 0 0 1-1.605-.928c-.482-.535-.7-1.346-1.134-2.97l-2.899-10.817Z' stroke='white' stroke-width='2'/%3e%3crect x='17.475' y='30.914' width='32' height='9' rx='3' transform='rotate(-15 17.475 30.914)' stroke='white' stroke-width='2'/%3e%3cpath d='M31.765 22.426c-.643-2.4-3.327-3.767-5.994-3.053-2.667.715-4.308 3.24-3.665 5.641.643 2.4 3.327 3.767 5.994 3.053M37.76 25.478c2.667-.714 4.308-3.24 3.665-5.64-.644-2.401-3.328-3.768-5.995-3.053-2.667.715-4.308 3.24-3.665 5.64M39.4 50.92l-7.764-28.977' stroke='white' stroke-width='2'/%3e%3c/g%3e%3cclipPath id='a'%3e%3cpath fill='white' transform='translate(0 .5)' d='M0 0h70v70H0z'/%3e%3c/clipPath%3e%3cfilter id='b' x='-20' y='-19.5' width='110' height='110' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeGaussianBlur in='BackgroundImage' stdDeviation='10'/%3e%3cfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_911:4007'/%3e%3cfeBlend in='SourceGraphic' in2='effect1_backgroundBlur_911:4007' result='shape'/%3e%3c/filter%3e%3c/svg%3e");
    background-repeat: no-repeat;
}

.title--rrN1h {
    color: rgb(var(--surface-on-primary));
    margin: 0;
}

.courseLinkWrapper--2-Rvn {
    margin: 0 0 10px;
}

.footerTextWrapper--K97HK {
    margin-top: 21px;
    text-align: center;
    opacity: 0;
}

.getGiftButtonWrapper--NaZ9S {
    margin-top: 24px;
}

.copyButtonWrapper--ARGzh {
    margin-top: 9px;
}

@-webkit-keyframes showGiftCard--AB-Ap {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.25);
                transform: scale(0.25);
    }
    55% {
        -webkit-transform: scale(0.25);
                transform: scale(0.25);
    }
    60% {
        opacity: 1;
    }
    80% {
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
    95% {
        -webkit-transform: scale(0.95);
                transform: scale(0.95);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}

@keyframes showGiftCard--AB-Ap {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.25);
                transform: scale(0.25);
    }
    55% {
        -webkit-transform: scale(0.25);
                transform: scale(0.25);
    }
    60% {
        opacity: 1;
    }
    80% {
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
    95% {
        -webkit-transform: scale(0.95);
                transform: scale(0.95);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes showFooterText--wUI2c {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes showFooterText--wUI2c {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.root--LHiJp {
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start;
    position: absolute;
    z-index: -1;
}

.confetti--ubO6d {
    opacity: 0;
    position: absolute;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 60ms;
            animation-delay: 60ms;
    -webkit-animation-duration: 750ms;
            animation-duration: 750ms;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}

.confetti--ubO6d[data-confetti-number='0'] {
    bottom: 40px;
    left: 42px;
}

.confetti--ubO6d[data-confetti-number='1'] {
    bottom: 35px;
    left: 110px;
}

.confetti--ubO6d[data-confetti-number='2'] {
    bottom: 50px;
    left: 100px;
}

.confetti--ubO6d[data-confetti-number='3'] {
    bottom: 25px;
    left: 60px;
}

.confetti--ubO6d[data-confetti-number='4'] {
    bottom: 10px;
    left: 120px;
}

.confetti--ubO6d[data-confetti-number='5'] {
    bottom: 60px;
    left: 130px;
}

.confetti--ubO6d[data-confetti-number='6'] {
    bottom: 50px;
    left: 130px;
}

.confetti--ubO6d[data-confetti-number='7'] {
    bottom: 54px;
    left: 21px;
}

.confetti--ubO6d[data-confetti-number='8'] {
    bottom: 0;
    left: 70px;
}

.confetti--ubO6d[data-confetti-number='9'] {
    bottom: 10px;
    left: 90px;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='0'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti0--Hl2nx;
            animation-name: hideConfetti--5X-6M, transformConfetti0--Hl2nx;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='1'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti1--Llbne;
            animation-name: hideConfetti--5X-6M, transformConfetti1--Llbne;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='2'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti2--jwEW8;
            animation-name: hideConfetti--5X-6M, transformConfetti2--jwEW8;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='3'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti3--ajCYz;
            animation-name: hideConfetti--5X-6M, transformConfetti3--ajCYz;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='4'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti4--\+Ju9T;
            animation-name: hideConfetti--5X-6M, transformConfetti4--\+Ju9T;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='5'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti5--Ujjil;
            animation-name: hideConfetti--5X-6M, transformConfetti5--Ujjil;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='6'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti6--6-xIw;
            animation-name: hideConfetti--5X-6M, transformConfetti6--6-xIw;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='7'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti7--ya6y\+;
            animation-name: hideConfetti--5X-6M, transformConfetti7--ya6y\+;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='8'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti8--HWhc1;
            animation-name: hideConfetti--5X-6M, transformConfetti8--HWhc1;
}

.root--LHiJp[data-is-gift-clicked='true'] .confetti--ubO6d[data-confetti-number='9'] {
    -webkit-animation-name: hideConfetti--5X-6M, transformConfetti9--WRxN9;
            animation-name: hideConfetti--5X-6M, transformConfetti9--WRxN9;
}

@-webkit-keyframes hideConfetti--5X-6M {
    0% {
        opacity: 1;
    }
    67% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hideConfetti--5X-6M {
    0% {
        opacity: 1;
    }
    67% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes transformConfetti0--Hl2nx {
    100% {
        -webkit-transform: translate(-60px, -260px);
                transform: translate(-60px, -260px);
    }
}

@keyframes transformConfetti0--Hl2nx {
    100% {
        -webkit-transform: translate(-60px, -260px);
                transform: translate(-60px, -260px);
    }
}

@-webkit-keyframes transformConfetti1--Llbne {
    100% {
        -webkit-transform: translate(-70px, -250px);
                transform: translate(-70px, -250px);
    }
}

@keyframes transformConfetti1--Llbne {
    100% {
        -webkit-transform: translate(-70px, -250px);
                transform: translate(-70px, -250px);
    }
}

@-webkit-keyframes transformConfetti2--jwEW8 {
    100% {
        -webkit-transform: translate(-10px, -270px);
                transform: translate(-10px, -270px);
    }
}

@keyframes transformConfetti2--jwEW8 {
    100% {
        -webkit-transform: translate(-10px, -270px);
                transform: translate(-10px, -270px);
    }
}

@-webkit-keyframes transformConfetti3--ajCYz {
    100% {
        -webkit-transform: translate(10px, -300px);
                transform: translate(10px, -300px);
    }
}

@keyframes transformConfetti3--ajCYz {
    100% {
        -webkit-transform: translate(10px, -300px);
                transform: translate(10px, -300px);
    }
}

@-webkit-keyframes transformConfetti4--\+Ju9T {
    100% {
        -webkit-transform: translate(20px, -250px);
                transform: translate(20px, -250px);
    }
}

@keyframes transformConfetti4--\+Ju9T {
    100% {
        -webkit-transform: translate(20px, -250px);
                transform: translate(20px, -250px);
    }
}

@-webkit-keyframes transformConfetti5--Ujjil {
    100% {
        -webkit-transform: translate(50px, -240px);
                transform: translate(50px, -240px);
    }
}

@keyframes transformConfetti5--Ujjil {
    100% {
        -webkit-transform: translate(50px, -240px);
                transform: translate(50px, -240px);
    }
}

@-webkit-keyframes transformConfetti6--6-xIw {
    100% {
        -webkit-transform: translate(20px, -290px);
                transform: translate(20px, -290px);
    }
}

@keyframes transformConfetti6--6-xIw {
    100% {
        -webkit-transform: translate(20px, -290px);
                transform: translate(20px, -290px);
    }
}

@-webkit-keyframes transformConfetti7--ya6y\+ {
    100% {
        -webkit-transform: translate(-60px, -190px);
                transform: translate(-60px, -190px);
    }
}

@keyframes transformConfetti7--ya6y\+ {
    100% {
        -webkit-transform: translate(-60px, -190px);
                transform: translate(-60px, -190px);
    }
}

@-webkit-keyframes transformConfetti8--HWhc1 {
    100% {
        -webkit-transform: translate(-140px, -200px);
                transform: translate(-140px, -200px);
    }
}

@keyframes transformConfetti8--HWhc1 {
    100% {
        -webkit-transform: translate(-140px, -200px);
                transform: translate(-140px, -200px);
    }
}

@-webkit-keyframes transformConfetti9--WRxN9 {
    100% {
        -webkit-transform: translate(125px, -270px);
                transform: translate(125px, -270px);
    }
}

@keyframes transformConfetti9--WRxN9 {
    100% {
        -webkit-transform: translate(125px, -270px);
                transform: translate(125px, -270px);
    }
}

.root--s46a3 {
    position: relative;
}

.root--s46a3[data-is-gift-clicked='false'] {
    height: 100%;
    overflow: hidden;
}

.giftContainer--3TbPJ {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, 100vh);
            transform: translate(-50%, 100vh);
    -webkit-animation-name: showGift--AiDpr;
            animation-name: showGift--AiDpr;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-duration: 450ms;
            animation-duration: 450ms;
}

.root--s46a3[data-is-gift-clicked='true'] .giftContainer--3TbPJ {
    z-index: 0;
}

.giftWrapper--9AIAz {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
    width: 181px;
    height: 182px;
    margin: 0 auto;
    cursor: pointer;
    -webkit-animation-name: shakeGift--gbjFF;
            animation-name: shakeGift--gbjFF;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-duration: 2300ms;
            animation-duration: 2300ms;
    -webkit-animation-delay: 450ms;
            animation-delay: 450ms;
}

.root--s46a3[data-is-gift-clicked='true'] .giftWrapper--9AIAz, .root--s46a3[data-is-gift-clicked='true'] .footerTextWrapper--VamBq {
    -webkit-animation: none;
            animation: none;
}

.root--s46a3[data-is-gift-clicked='true'] .giftBox--AA5A7, .root--s46a3[data-is-gift-clicked='true'] .giftCover--OtGTs {
    -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.root--s46a3[data-is-gift-clicked='true'] .giftCover--OtGTs {
    -webkit-animation-name: transformGiftCover--qSETP;
            animation-name: transformGiftCover--qSETP;
}

.root--s46a3[data-is-gift-clicked='true'] .giftBox--AA5A7 {
    -webkit-animation-name: transformGiftBox--sid23;
            animation-name: transformGiftBox--sid23;
}

.footerTextWrapper--VamBq {
    opacity: 0;
    margin-top: 30px;
    text-align: center;
    -webkit-animation-name: show--KhtDF;
            animation-name: show--KhtDF;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
    -webkit-animation-delay: 1750ms;
            animation-delay: 1750ms;
}

.giftBox--AA5A7 {
    margin: -4px auto 0;
    text-align: center;
}

@-webkit-keyframes showGift--AiDpr {
    0% {
        -webkit-transform: translate(-50%, 100vh);
                transform: translate(-50%, 100vh);
    }
    40% {
        -webkit-transform: translate(-50%, -90%);
                transform: translate(-50%, -90%);
    }
    80% {
        -webkit-transform: translate(-50%, -45%);
                transform: translate(-50%, -45%);
    }
    95% {
        -webkit-transform: translate(-50%, -52%);
                transform: translate(-50%, -52%);
    }
    100% {
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }
}

@keyframes showGift--AiDpr {
    0% {
        -webkit-transform: translate(-50%, 100vh);
                transform: translate(-50%, 100vh);
    }
    40% {
        -webkit-transform: translate(-50%, -90%);
                transform: translate(-50%, -90%);
    }
    80% {
        -webkit-transform: translate(-50%, -45%);
                transform: translate(-50%, -45%);
    }
    95% {
        -webkit-transform: translate(-50%, -52%);
                transform: translate(-50%, -52%);
    }
    100% {
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }
}

@-webkit-keyframes shakeGift--gbjFF {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    11% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    22% {
        -webkit-transform: rotate(-10deg);
                transform: rotate(-10deg);
    }
    33% {
        -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
    }
    44% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
}

@keyframes shakeGift--gbjFF {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    11% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    22% {
        -webkit-transform: rotate(-10deg);
                transform: rotate(-10deg);
    }
    33% {
        -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
    }
    44% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
}

@-webkit-keyframes transformGiftCover--qSETP {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-30vh);
                transform: translateY(-30vh);
    }
}

@keyframes transformGiftCover--qSETP {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-30vh);
                transform: translateY(-30vh);
    }
}

@-webkit-keyframes transformGiftBox--sid23 {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(30vh);
                transform: translateY(30vh);
    }
}

@keyframes transformGiftBox--sid23 {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(30vh);
                transform: translateY(30vh);
    }
}

@-webkit-keyframes show--KhtDF {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes show--KhtDF {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.root--nOLFM {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 100%;
    position: relative;
    padding: 0 5px;
    color: rgb(var(--surface-on-placeholder))
}
@media (min-width: 768px) {
    .root--nOLFM {
        width: 400px;
        top: -25px
}
    }
@media (min-width: 992px) {
    .root--nOLFM {
        top: -30px
}
    }

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--E5TLR, .h1--V5BHs {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--E5TLR, .h1--V5BHs {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--P0LH9, .h2--C40hq, .title--DvHIX {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--P0LH9, .h2--C40hq, .title--DvHIX {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--tbOcn, .h3--RyjIb {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--2J8yu, .h4--dTtOF {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--2J8yu, .h4--dTtOF {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--E17ui, .h5--\+9YGk {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--h3pii, .h6---fecw {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--h3pii, .h6---fecw {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.root--x-Vf5 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 15px;
    border: 1px dashed rgb(var(--border-separator));
    padding: 15px;
    margin-bottom: 20px;
    width: 250px;
    height: 250px;
    text-align: center;
    color: rgb(var(--surface-on-placeholder))
}

@media (min-width: 359px) {

.root--x-Vf5 {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 304px;
        height: 304px
}
    }

@media (min-width: 768px) {

.root--x-Vf5 {
        padding: 50px;
        width: 298px;
        height: 298px;
        max-width: none;
        max-width: initial
}
    }

.title--DvHIX {
    margin: 0 0 10px;
}

.root--Db0Jx {
    position: relative;
    z-index: 1;
    width: 100vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%)
}

.root--Db0Jx.withoutHeight--tjaop {
        position: absolute;
        top: -1000px
    }

@media (min-width: 992px) {

.root--Db0Jx.withoutHeight--tjaop {
            position: relative;
            top: auto
    }
        }

@media (max-width: 768px) {
        .root--Db0Jx::before {
            content: '';
            position: absolute;
            top: -17px;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            z-index: 2;
            width: 100vw;
            height: 20px;
            background-color: var(--color-urania-background);
        }
    }

.wrapper--l3ccG {
    position: relative;
    width: 100%;
    -webkit-animation-name: showNotification--W4rEl;
            animation-name: showNotification--W4rEl;
    -webkit-animation-duration: 700ms;
            animation-duration: 700ms;
    -webkit-animation-delay: 1000ms;
            animation-delay: 1000ms;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    margin-top: calc(var(--notification-height) * -1)
}

.wrapper--l3ccG.hidden--D9IkO {
        -webkit-animation-delay: 0ms;
                animation-delay: 0ms;
        -webkit-animation-name: hideNotification--pIfL1;
                animation-name: hideNotification--pIfL1;
    }

@media (min-width: 992px) {

.wrapper--l3ccG {
        position: absolute;
        -webkit-animation-delay: 0ms;
                animation-delay: 0ms;
        top: -30px;
        margin-top: 0
}
    }

.visibleContent--Jpvct {
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: var(--colorWhite);
    background-color: var(--colorLink);
    font-size: 17px;
    line-height: 25px;
    font-weight: 600;
    padding: 15px 20px 15px 62px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABR1BMVEUAAAD6wjLhmBD8xjjwphftyTbJdAn4vS3urhfYig7mmhvrqRfOfArppRbGbwv9xzn4vy3FcAzooxHUgwj7wjD1tyXknw7HdAzioxHHcgzYjQrYjArxsyDakAvztyrgmRD8xTbhmRD6wTDflg/MegrytSPqpRLelA30tiP4wDDopRv5wTDMeAvxsR7UgwrckQzvrhvhmw3VhwzQgAnglw78xTbckgvjnA//yT7HcQ3/z0X2uSr/0En3uyfusBzRfwq/ag7lnQvLfQrRfAf8xjb/1FX/1FT9xzn/1Vv/1Vn/zkT/12b3vCn/1Ff/01D/0Er/z0j+yTz7wzT5vi3/1l/+zUL+yDr6wjHtqxb/1mL/0k7/0kz4vSv/yz/wsBvflgrvrhrknw3bkAn1uSb0tybytSXysx/urhrppBPjmw3moA7QfwvJdgvBK+6lAAAARHRSTlMA3vfjEAQ/OSgNBv3r5uTew72yoYV6diAW/v749PTy8vHv7uzo5+Tj39zc2trX0M/JxcS9u6SfmpOOiW5iYVpOSEYxJ19aDd0AAAFYSURBVCjP1ZDHcsIwFEWVECD0XtJ77713SbaMbdxtTO+Q5P/XkXdmQrLn7N6cuXfuPDBRzPwrr5TMnzL/4NHl/bEq6M/EV2VZ7pyPK02vQ8NglEp/wffbzu5CGZpqb7B08e7cXq/XXXwEqzKj8N3u8t6Ug8fjicXificYACDLVzmpKCKMsWiXbRFjhLDNnQLwbFnbyUVYLYuIsAQVOQNChjEYqJidS+A9UExVhbqNBFbTWFKEoWnKytrGzkkqB/y0tFgWMcKILRUKJZaLuN/2KCKBsCwRMNEKlBJR31z63kk6S4imOWEkbeVd+raq6xzHSWUsEK3ECoJ+A1ykIcWZKnMSXWELUtKtn3iKapqmAhmKoSvZkW82+pZl9dptnq9QVDUSAG7O6vVWqz4cWI1ardaoha7BCB+b33PRRPSrVW9+NpvD+RcwSu6V1gV9d4nDcPg45QMTwg89W1Q9hiznkwAAAABJRU5ErkJggg==);
    background-size: 30px;
    background-position: 22px 15px
}

@media (min-width: 768px) {

.visibleContent--Jpvct {
        font-size: 21px;
        padding: 27px 30px 28px 83px;
        background-position: 38px 25px
}
    }

@-webkit-keyframes showNotification--W4rEl {
    0% {
        margin-top: calc(var(--notification-height) * -1);
    }

    100% {
        margin-top: 0;
    }
}

@keyframes showNotification--W4rEl {
    0% {
        margin-top: calc(var(--notification-height) * -1);
    }

    100% {
        margin-top: 0;
    }
}

@-webkit-keyframes hideNotification--pIfL1 {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: calc(var(--notification-height) * -1);
    }
}

@keyframes hideNotification--pIfL1 {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: calc(var(--notification-height) * -1);
    }
}

@media (min-width: 992px) {
    @-webkit-keyframes showNotification--W4rEl {
        0% {
            -webkit-transform: translateY(-100%);
                    transform: translateY(-100%);
        }
        100% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
    }
    @keyframes showNotification--W4rEl {
        0% {
            -webkit-transform: translateY(-100%);
                    transform: translateY(-100%);
        }
        100% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
    }

    @-webkit-keyframes hideNotification--pIfL1 {
        0% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(-100%);
                    transform: translateY(-100%);
        }
    }

    @keyframes hideNotification--pIfL1 {
        0% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(-100%);
                    transform: translateY(-100%);
        }
    }
}

.root--Fya4Y {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    font-family: var(--grotesque-font);
    width: 100%;
}

.root--Fya4Y[data-is-row='true'] {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
}

.layout--OQG\+1 {
    padding: 0 var(--bodyMobilePaddingUrania);
    margin: 0 auto;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: var(--color-urania-background)
}

@media (min-width: 768px) {

.layout--OQG\+1 {
        padding: 0 var(--bodyTabletPaddingUrania);
        max-width: calc(var(--contentTabletWidth) + 2 * var(--bodyTabletPaddingUrania))
}
    }

@media (min-width: 992px) {

.layout--OQG\+1 {
        max-width: calc(var(--contentLaptopWidth) + 2 * var(--bodyTabletPaddingUrania))
}
    }

@media (min-width: 1280px) {

.layout--OQG\+1 {
        max-width: calc(var(--contentMaxWidth) + 2 * var(--bodyTabletPaddingUrania))
}
    }

.layout--OQG\+1[data-is-centered='true'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.layout--OQG\+1[data-is-main='true'] {
    min-height: 100vh;
}