/* Хир «Дети в больнице». Кадр 2049:2315, холст 1920, колонка 1440 (x − 240).
   y = Figma y − 116 (шапка). Absolute-композиция — от 1401px.
   Ниже 1401 — та же композиция столбиком: title → lead → фото. */

.db-hero__line,
.db-hero__dot {
    display: none;
}

.db-hero__photo {
    display: none;
}

.db-hero__title {
    margin: 48px 0 0;
    color: #3EA74F;
    font-size: 72px;
    line-height: 0.9;
    text-align: center;
}

.db-hero__lead {
    margin: 24px auto 48px;
    max-width: 688px;
    padding: 0 20px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.44px;
    text-align: center;
    color: #4D4D4D;
}

/* ——— ≤1400: десктопная композиция в одну колонку ——— */
@media (max-width: 991px) {

    body.page-deti-bolnice .db-hero {
        padding: 8px 0 8px;
    }

    body.page-deti-bolnice .db-hero__stage {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px 14px;
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        padding: 0 16px 40px;
        box-sizing: border-box;
    }

    body.page-deti-bolnice .db-hero__title {
        order: 1;
        width: 100%;
        margin: 12px 0 0;
        padding: 0 4px;
        font-size: clamp(48px, 14vw, 72px);
        line-height: 0.95;
        letter-spacing: -0.04em;
    }

    body.page-deti-bolnice .db-hero__lead {
        order: 2;
        width: 100%;
        margin: 16px auto 28px;
        padding: 0;
        max-width: 36em;
        font-size: clamp(16px, 4.2vw, 22px);
        letter-spacing: -0.02em;
    }

    body.page-deti-bolnice .db-hero__photo {
        display: block;
        order: 3;
        width: calc(50% - 10px);
        max-width: 168px;
        aspect-ratio: 1;
        height: auto;
        border-radius: 12px;
        object-fit: cover;
        flex: 0 0 auto;
    }

    body.page-deti-bolnice .db-hero__photo--1 { transform: rotate(-4deg); }
    body.page-deti-bolnice .db-hero__photo--2 { transform: rotate(6deg); margin-top: 18px; }
    body.page-deti-bolnice .db-hero__photo--3 { transform: rotate(-5deg); }
    body.page-deti-bolnice .db-hero__photo--4 { transform: rotate(8deg); margin-top: 18px; }

    body.page-deti-bolnice .db-hero__line,
    body.page-deti-bolnice .db-hero__dot {
        display: none;
    }
}

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

    body.page-deti-bolnice .db-hero__stage {
        gap: 14px 20px;
        padding-bottom: 56px;
    }

    body.page-deti-bolnice .db-hero__photo {
        max-width: 200px;
    }
}

@media (min-width: 992px) {

    body.page-deti-bolnice .db-hero__stage {
        position: relative;
        width: 1440px;
        max-width: 100%;
        height: 800px;
        margin: 0 auto;
    }

    body.page-deti-bolnice .db-hero__line,
    body.page-deti-bolnice .db-hero__photo,
    body.page-deti-bolnice .db-hero__dot,
    body.page-deti-bolnice .db-hero__title,
    body.page-deti-bolnice .db-hero__lead {
        position: absolute;
        margin: 0;
    }

    body.page-deti-bolnice .db-hero__line {
        display: block;
        left: 251.5px;
        top: 477.5px;
        width: 969px;
        height: 250px;
        z-index: 1;
        pointer-events: none;
    }

    body.page-deti-bolnice .db-hero__photo {
        display: block;
        z-index: 2;
        border-radius: 12px;
        object-fit: cover;
        pointer-events: none;
    }

    /* AABB макета → центр, затем поворот. Размеры — как в кадре (1×). */
    body.page-deti-bolnice .db-hero__photo--1 {
        left: 55.7px;
        top: 474.6px;
        width: 228.343px;
        height: 228.343px;
        transform: rotate(-4deg);
    }

    body.page-deti-bolnice .db-hero__photo--2 {
        left: 445.4px;
        top: 432.4px;
        width: 210px;
        height: 210px;
        transform: rotate(6deg);
    }

    body.page-deti-bolnice .db-hero__photo--3 {
        left: 777.15px;
        top: 526.35px;
        width: 243.297px;
        height: 243.297px;
        transform: rotate(-5deg);
    }

    body.page-deti-bolnice .db-hero__photo--4 {
        left: 1166.8px;
        top: 293.8px;
        width: 236.808px;
        height: 236.808px;
        transform: rotate(8.28deg);
    }

    body.page-deti-bolnice .db-hero__dot {
        display: block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #185E30;
        z-index: 3;
        pointer-events: none;
    }

    body.page-deti-bolnice .db-hero__dot--1 { left: 268px; top: 481px; }
    body.page-deti-bolnice .db-hero__dot--2 { left: 463px; top: 543px; }
    body.page-deti-bolnice .db-hero__dot--3 { left: 572px; top: 641px; }
    body.page-deti-bolnice .db-hero__dot--4 { left: 588px; top: 687px; }
    body.page-deti-bolnice .db-hero__dot--5 { left: 779px; top: 712px; }
    body.page-deti-bolnice .db-hero__dot--6 { left: 1015px; top: 626px; }
    body.page-deti-bolnice .db-hero__dot--7 { left: 1205px; top: 516px; }

    body.page-deti-bolnice .db-hero__title {
        z-index: 4;
        left: 41px;
        top: 68px;
        width: 1357px;
        padding: 0;
        font-size: 148px;
        line-height: 1;
        letter-spacing: -6px;
        text-align: center;
        white-space: nowrap;
        color: #3EA74F;
    }

    body.page-deti-bolnice .db-hero__lead {
        z-index: 4;
        left: 369px;
        top: 325px;
        width: 688px;
        max-width: none;
        padding: 0;
        font-size: 28px;
        line-height: 1.1;
        letter-spacing: -0.56px;
    }
}