.years-block {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 85px 50px 110px;
    background-color: #f5f5f5;
    overflow: hidden;
    box-sizing: border-box;
}

.years-block-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1180px;
    align-items: flex-start;
    gap: 49px;
    height: 778px;
    position: relative;
}

.years-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 417px;
}

.years-map-wrap {
    display: contents;
}

.years-title {
    color: #48924E;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.years-text {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.years-text-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.years-subtext {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.years-img-1 {
    width: 386px;
    height: auto;
    display: block;
}

.years-map {
    position: absolute;
    left: 417px;
    top: -259px;
    width: 1896px;
    height: 1087px;
    pointer-events: none;
    user-select: none;
}

.years-img-2 {
    width: 386px;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 417px;
    display: block;
}

.map-text-1,
.map-text-2,
.map-text-3 {
    position: absolute;
    padding: 10px 9px 11px;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    white-space: nowrap;
}

.map-text-1 { left: 743px; top: 169px; }
.map-text-2 { left: 871px; top: 306px; }
.map-text-3 { left: 705px; top: 384px; }

/*
   Промежуточные размеры (769—1280px).
   Текст и подписи плавно уменьшаются.
   Карта остаётся на своих абсолютных координатах относительно
   .years-block-content (max-width: 1180px по центру). Когда контейнер уже,
   карта по-прежнему стоит left: 417px от его левого края, а её правая
   часть просто прячется через overflow: hidden у .years-block.
   Так карта не налазит на колонку с текстом и не "уезжает" под него.
*/
@media (min-width: 769px) and (max-width: 1280px) {
    .years-block { padding: 60px 30px 80px; }

    .years-title { font-size: clamp(48px, 6vw, 72px); }
    .years-text { font-size: clamp(18px, 2vw, 24px); }
    .years-subtext { font-size: clamp(13px, 1.4vw, 16px); }

    .map-text-1,
    .map-text-2,
    .map-text-3 {
        font-size: clamp(12px, 1.3vw, 16px);
        line-height: 1.25;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .years-column { max-width: 340px; gap: 24px; }
    .years-text-container { gap: 20px; }
    .years-block-content { gap: 32px; }

    /* Сдвигаем карту и подписи левее, чтобы все три области помещались. */
    .years-map { left: 290px; }
    .years-img-2 { left: 290px; }
    .map-text-1 { left: 616px; }
    .map-text-2 { left: 744px; }
    .map-text-3 { left: 578px; }
}

@media (min-width: 1025px) and (max-width: 1180px) {
    .years-map { left: 390px; }
    .years-img-2 { left: 390px; }
    .map-text-1 { left: 716px; }
    .map-text-2 { left: 844px; }
    .map-text-3 { left: 678px; }
}

/*
   Мобильный — повторяем мобильную композицию старого сайта.
   Текст сверху (z-index:10), карта на фоне абсолютно,
   два фото поверх карты по углам внизу.
*/
@media (max-width: 768px) {
    .years-block { padding: 20px; }

    .years-block-content {
        height: 769px;
        gap: 0;
        max-width: 100%;
    }

    .years-column {
        max-width: 100%;
        gap: 10px;
        z-index: 10;
        position: relative;
    }

    .years-title { font-size: 40px; }
    .years-text { font-size: 22px; width: 262px; max-width: 100%; }
    .years-text-container { gap: 15px; margin-top: 14px; }
    .years-subtext { font-size: 12px; width: 300px; max-width: 100%; }

    .years-map-wrap { display: contents; }

    .years-map {
        position: absolute;
        height: 683px;
        width: auto;
        top: 40px;
        left: 0;
    }

    .years-img-1 {
        width: 236px;
        height: auto;
        z-index: 10;
        position: absolute;
        left: 20px;
        bottom: 153px;
        border-radius: 8px;
    }

    .years-img-2 {
        width: 236px;
        height: auto;
        position: absolute;
        bottom: 0;
        right: 20px;
        left: auto;
        z-index: 10;
        border-radius: 8px;
    }

    .map-text-1,
    .map-text-2,
    .map-text-3 {
        padding: 7px;
        font-size: 10px;
        line-height: 14px;
        border-radius: 6px;
        white-space: nowrap;
    }
    .map-text-1 { left: 75px; top: 343px; }
    .map-text-2 { left: 248px; top: 339px; }
    .map-text-3 { left: 64px; top: 416px; }
}