/* ==================================================
   COURSE 2 — ПЕРВЫЙ ЭКРАН
   ================================================== */

.course2-hero {
    position: relative;

    width: 1200px;
    height: 1190px;

    overflow: hidden;

    background: var(--cream-50);
    color: var(--graphite);
}


/* ==================================================
   ФОНОВАЯ КАРТИНКА
   ================================================== */

.course2-hero__bg {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;

    width: 1200px;
    height: 100%;

    background-image: url('../../images/course2/hero_photo_1200.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 1200px auto;

    pointer-events: none;
}


/* ==================================================
   ОСНОВНОЙ КОНТЕНТ
   ================================================== */

.course2-hero__content {
    position: relative;
    z-index: 2;

    width: 570px;

    padding-top: 65px;
    padding-left: 52px;
}


/* ==================================================
   ЗАГОЛОВОК
   ================================================== */

.course2-hero__title {
    margin: 0;

    font-family: var(--font-heading);
    font-size: 60px;
    line-height: 1.16;
    font-weight: 400;

    letter-spacing: -1.5px;

    color: var(--graphite);
}


/* ==================================================
   ПОДЗАГОЛОВОК
   ================================================== */

.course2-hero__subtitle {
    margin-top: 65px;

    font-size: 31px;
    line-height: 1.35;
    font-weight: 400;

    color: var(--graphite);
}

.course2-hero__subtitle span {
    color: var(--orange-100);
}


/* ==================================================
   ОРАНЖЕВАЯ ЛИНИЯ
   ================================================== */

.course2-hero__accent {
    width: 135px;
    height: 3px;

    margin-top: 50px;

    background: var(--orange-100);
}


/* ==================================================
   МАРШРУТ
   ================================================== */

.course2-route {
    position: relative;

    width: 500px;
    height: 420px;

    margin-top: 55px;

    background-image: url('/images/course2/01screen_route.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 100%;
}

/* ==================================================
   ТЕКСТ МАРШРУТА
   ================================================== */

.course2-route__items {
    position: relative;

    height: 100%;

    padding-left: 55px;

    font-size: 22px;
    line-height: 1;
    font-weight: 500;

    color: var(--graphite);
}


.course2-route__items > div {
    position: absolute;
    left: 55px;

    transform: translateY(-50%);
}


/* положение каждой точки */

.course2-route__items > div:nth-child(1) { top: 3%; }
.course2-route__items > div:nth-child(2) { top: 18%; }
.course2-route__items > div:nth-child(3) { top: 32.8%; }
.course2-route__items > div:nth-child(4) { top: 48.5%; }
.course2-route__items > div:nth-child(5) { top: 64%; }
.course2-route__items > div:nth-child(6) { top: 79.2%; }
.course2-route__items > div:nth-child(7) { top: 94.7%; }

/* ==================================================
   НИЖНЯЯ ПЛАШКА
   ================================================== */

.course2-hero__facts {
    position: absolute;
    z-index: 3;

    left: 65px;
    bottom: 0;

    display: flex;
    align-items: center;

    width: 1070px;
    height: 102px;

    padding: 0 55px;

    background: var(--cream-500);
    border-radius: 8px ;
}


/* ==================================================
   ЭЛЕМЕНТ ПЛАШКИ
   ================================================== */

.course2-fact {
    position: relative;

    display: flex;
    align-items: center;

    height: 58px;

    font-size: 18px;
    line-height: 1.25;
    font-weight: 500;

    color: var(--graphite);
}

.course2-fact:nth-child(1) {
    width: 280px;
}

.course2-fact:nth-child(2) {
    width: 380px;
}

.course2-fact:nth-child(3) {
    flex: 1;
}


/* разделители */

.course2-fact + .course2-fact {
    padding-left: 55px;
}

.course2-fact + .course2-fact::before {
    content: '';

    position: absolute;

    left: 0;
    top: 4px;

    width: 1px;
    height: 50px;

    background: var(--sand-500);
}


/* ==================================================
   ИКОНКИ
   ================================================== */

.course2-fact img {
    display: block;
    flex: 0 0 auto;

    width: 45px;
    height: 45px;

    margin-right: 22px;

    object-fit: contain;
}