.emergency-steps{.wrapper {
        display: flex;
        flex-direction: column;
        gap: clamp(24px,2.223vw,32px);
    }

    button,
    .emergency-steps__button {
        margin: clamp(24px,2.223vw,32px) auto 0;
    }

    .emergency-steps__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .emergency-steps__link {
        flex-shrink: 0;
        align-self: center;
    }

    .emergency-steps__title {
        font-size: clamp(24px,2.223vw,32px);
        max-width: 850px;
        letter-spacing: 0.04em;

        @media (max-width: 767px) {
            font-size: 22px;
        }
    }

    .emergency-steps__list {
        --emergency-steps-line-start: 0%;
        --emergency-steps-line-end: 0%;

        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;

        @media (min-width: 992px) {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
            padding-top: 24px;
            margin-top: 12px;
            &:before {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                height: 2px;
                width: 100%;
                background: linear-gradient(
                    90deg,
                    #BADDF1 0%,
                    #BADDF1 var(--emergency-steps-line-start),
                    #78BDDF var(--emergency-steps-line-start),
                    #78BDDF var(--emergency-steps-line-end),
                    #BADDF1 var(--emergency-steps-line-end),
                    #BADDF1 100%
                );
            }
        }
    }

    .emergency-steps__text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .emergency-steps__item {
        display: flex;
        flex-direction: column;
        gap: 24px;
        background-color: white;
        position: relative;
        padding: clamp(16px,2.223vw,32px);
        border-radius: 8px;
        transition: all 300ms;
        transform-style: preserve-3d;
        will-change: transform;

        & > * {
            position: relative;
            z-index: 2;
        }

        &:after {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            border-radius: inherit;
            opacity: var(--emergency-steps-ink-opacity, 0);
            background-image:
                linear-gradient(
                    110deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0) 38%,
                    rgba(255, 255, 255, var(--emergency-steps-shine-opacity, 0)) 49%,
                    rgba(255, 255, 255, 0) 62%,
                    rgba(255, 255, 255, 0) 100%
                ),
                radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 28%),
                linear-gradient(145deg, rgba(205, 235, 249, 0.98), #BADDF1 52%, rgba(143, 204, 232, 0.96));
            background-position:
                var(--emergency-steps-shine-x, -130%) 0,
                0 0,
                0 0;
            background-size:
                220% 100%,
                auto,
                auto;
            clip-path: circle(var(--emergency-steps-ink-radius, 0px) at var(--emergency-steps-ink-x, 56px) var(--emergency-steps-ink-y, -26px));
            will-change: clip-path, opacity, background-position;
        }

        @media (min-width: 992px) {
            &:before {
                transition: all 300ms;
                content: '';
                display: block;
                position: absolute;
                top: -36px;
                left: 48px;
                height: 18.5px;
                width: 18.5px;
                background-color: #F3F3F1;
                border-radius: 50%;
                border: 3px solid #F3F3F1;
                outline: 2px solid #BADDF1;
                z-index: 3;
                transform-origin: 50% 50%;
                will-change: transform, box-shadow;
            }


            &.active {
                background-color: #BADDF1;

                .emergency-steps__id {
                    background-color: white;
                    opacity: 0.8;
                }

                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: -36px;
                    left: 48px;
                    height: 18.5px;
                    width: 18.5px;
                    background-color: #BADDF1;
                    border-radius: 50%;
                    border: 3px solid white;
                    outline: 2px solid #BADDF1;
                    z-index: 3;
                }
            }

            &.is-dot-animating:before {
                animation: emergency-step-dot-pulse 860ms cubic-bezier(0.19, 1, 0.22, 1);
            }
        }

        @media (min-width: 768px) and (max-width: 991px){
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px 20px;

            .div2 {
                grid-column-start: 1;
                grid-row-start: 2;
            }

            .emergency-steps__image {
                grid-row: span 2 / span 2;
                grid-column-start: 2;
                grid-row-start: 1;
            }

        }

        @media (max-width: 991px) {
            &.active {
                background-color: #BADDF1;

                .emergency-steps__id {
                    background-color: white;
                    opacity: 0.8;
                }
            }
        }
    }

    .emergency-steps__id {
        max-height: 32px;
        padding: 4px 8px;
        font-size: 14px;
        background-color: #BADDF1;
        opacity: 0.5;
        border-radius: 4px;
        width: fit-content;
        font-weight: 600;
    }

    .emergency-steps__title-item {
        font-size: clamp(18px, 1.528vw, 22px);

        @media (max-width: 767px) {
            & br {
                display: none;
            }
        }
    }
    .emergency-steps__image {
        position: relative;
        padding-top: clamp(172px,13.473vw,194px);
        width: 100%;
        /*height: 100%;*/
        margin-top: auto;
        overflow: hidden;
        border-radius: 8px;

        & img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    @media (max-width: 991px) {

    }

    /* VERSION 2 */
    &.v2 {

        .wrapper {
            gap: clamp(16px,1.667vw,24px);
        }

        .emergency-steps__head {
            display: block;
            position: relative;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding-bottom: 28px;

            @media (max-width: 991px) {
                text-align: center;
                padding-bottom: 0;
            }
        }

        .emergency-steps__title {
            max-width: 680px;
            text-align: center;
            margin: 0 auto;
            font-size: clamp(22px,1.667vw,32px);
            line-height: 1.25;
            letter-spacing: 0;
        }

        .emergency-steps__link {
            position: absolute;
            right: 0;
            bottom: 0;
            width: auto;
            max-width: none;
            color: #1B1D1F;
            text-align: right;
            white-space: nowrap;

            @media (max-width: 991px) {
                position: static;
                margin-top: 16px;
                max-width: none;
                text-align: center;
            }

            @media (max-width: 767px) {
                width: 100%;
                justify-content: center;
            }
        }

        .emergency-steps__list {
            width: 100%;
            max-width: 1100px;
            margin-inline: auto;
        }

        .emergency-steps__item {
            gap: clamp(12px,1.389vw,20px);
            grid-template-columns: 1fr;
            min-height: 190px;
            padding: 20px 16px;
            border-radius: 4px;
            transition: none;
            transform-style: flat;
            will-change: auto;

            &:after {
                display: none;
            }

            @media (min-width: 992px) {
                &:before {
                    transition: none;
                    will-change: auto;
                }

                &.is-dot-animating:before {
                    animation: none;
                }
            }

            &:not(.active) svg path[fill="white"] {
                fill: #BADDF1;
            }

            &.active svg path[fill="#BADDF1"] {
                fill: #fff;
            }

            .emergency-steps__id {
                display: flex;
                font-size: 12px;
                line-height: 16px;
                opacity: 1;

                @media (max-width: 991px) {
                    margin: auto 0 0 0;
                }
            }

            .emergency-steps__image--svg {
                padding: 0;
                margin: 12px 0 0 0;
                width: 64px;
                height: 64px;
                overflow: visible;

                @media (max-width: 991px) {
                    margin: 0;
                }
                @media (max-width: 767px) {
                    margin: 20px 0 0 0;
                }
            }
            .emergency-steps__image--raster {
                overflow: hidden;

                & img {
                    object-fit: cover;
                }
            }
            .emergency-steps__image--svg svg{
                transition: none;
                color: #BADDF1;
                overflow: visible;
                transform-origin: 50% 50%;
                display: block;
                width: 100px;
                height: 100px;
            }

            .emergency-steps__image--svg svg path{
                transform-box: fill-box;
                transform-origin: center;
            }

            &.active {
                .emergency-steps__id {
                    opacity: 1;
                }
                .emergency-steps__image--svg svg{
                    color: #ffffff;
                }
            }

            @media (max-width: 991px) {
                &:nth-child(2n + 1) svg{
                    color: #ffffff;
                }
            }

            @media (min-width: 768px) and (max-width: 991px) {
                .emergency-steps__image {
                    grid-column: auto;
                    grid-row: auto;
                }
            }
        }

        .emergency-steps__text-wrapper {
            gap: 0;
        }

        .emergency-steps__title-item {
            font-size: 22px;
            line-height: 1.35;
            font-weight: 600;
            letter-spacing: 0;
        }
    }

    &.v2 {
        box-sizing: border-box;
        width: 100%;
        color: #111111;
        font-family: "Montserrat", sans-serif;
        background-color: #F3F3F1;
        padding-block: 58px;

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

        > .container {
            width: 100%;
            max-width: 1344px;
            margin-inline: auto;
            padding-inline: 32px;
        }

        .wrapper {
            gap: 32px;
        }

        .emergency-steps__head {
            max-width: none;
            padding-bottom: 0;
        }

        .emergency-steps__title {
            max-width: none;
            margin: 0 auto;
            font-size: 32px;
            line-height: 40px;
            letter-spacing: 0.04em;
        }

        .emergency-steps__link {
            display: none;
        }

        .emergency-steps__list {
            max-width: none;

            &:before {
                top: -1px;
                background: #BADDF1;
            }
        }

        .emergency-steps__item {
            gap: 0;
            min-width: 0;
            min-height: 0;
            padding: 24px;
            border-radius: 8px;
            background-color: #FFFFFF;

            &:before,
            &.active:before {
                box-sizing: border-box;
                top: -36px;
                left: 48px;
                width: 24px;
                height: 24px;
                border: 2px solid #BADDF1;
                outline: 0;
                background-color: #F3F3F1;
            }

            &:nth-child(2):before,
            &:nth-child(2).active:before {
                left: 50px;
            }

            &:nth-child(3):before,
            &:nth-child(3).active:before {
                left: 52px;
            }

            &.active {
                background-color: #BADDF1;

                &:before {
                    background-color: #BADDF1;
                    box-shadow: inset 0 0 0 3px #F3F3F1;
                }

                .emergency-steps__id {
                    background-color: #FFFFFF;
                }
            }

            &:not(.active) {
                background-color: #FFFFFF;
            }

            .emergency-steps__id {
                display: flex;
                width: fit-content;
                max-height: none;
                margin: 0;
                padding: 4px 8px;
                color: rgba(17, 17, 17, 0.5);
                font-size: 14px;
                font-weight: 600;
                line-height: 24px;
                background-color: #BADDF1;
                border-radius: 4px;
                opacity: 1;
            }

            .emergency-steps__image--svg {
                width: 100px;
                height: 100px;
                margin: 32px 0 0;
            }

            .emergency-steps__image--svg svg {
                width: 100px;
                height: 100px;
            }
        }

        .emergency-steps__text-wrapper {
            margin-top: 20px;
        }

        .emergency-steps__title-item {
            width: 100%;
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            line-height: 32px;
            letter-spacing: 0;
        }

        @media (max-width: 1024px) {
            padding-block: 50px;

            .wrapper {
                gap: 24px;
            }

            .emergency-steps__title {
                font-size: 24px;
                line-height: 32px;
            }

            .emergency-steps__list {
                grid-template-columns: 1fr;
                gap: 8px;
                margin-top: 0;
                padding-top: 0;

                &:before {
                    display: none;
                }
            }

            .emergency-steps__item {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 110px;
                grid-template-rows: auto auto;
                align-content: center;
                min-height: 142px;
                padding: 16px;
                column-gap: 20px;
                row-gap: 16px;

                &:before {
                    display: none;
                }

                .emergency-steps__id {
                    grid-column: 1;
                    grid-row: 1;
                    align-self: end;
                    margin: 0;
                }

                .emergency-steps__image--svg {
                    grid-column: 2;
                    grid-row: 1 / span 2;
                    align-self: center;
                    width: 110px;
                    height: 110px;
                    margin: 0;
                }

                .emergency-steps__image--svg svg {
                    width: 110px;
                    height: 110px;
                }
            }

            .emergency-steps__text-wrapper {
                grid-column: 1;
                grid-row: 2;
                align-self: start;
                margin-top: 0;
            }

            .emergency-steps__title-item {
                font-size: 18px;
                line-height: 24px;
            }
        }

        @media (max-width: 767px) {
            padding-block: 40px;

            > .container {
                padding-inline: 20px;
            }

            .emergency-steps__title {
                font-size: 22px;
                line-height: 32px;
            }

            .emergency-steps__list {
                gap: 16px;
            }

            .emergency-steps__item {
                display: flex;
                gap: 0;
                min-height: 0;
                padding: 24px 16px;

                .emergency-steps__id {
                    align-self: flex-start;
                }

                .emergency-steps__image--svg {
                    align-self: flex-start;
                    width: 100px;
                    height: 100px;
                    margin-top: 32px;
                }

                .emergency-steps__image--svg svg {
                    width: 100px;
                    height: 100px;
                }
            }

            .emergency-steps__text-wrapper {
                margin-top: 12px;
            }
        }
    }
}@keyframes emergency-step-dot-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(186, 221, 241, 0);
    }

    46% {
        transform: scale(1.24);
        box-shadow: 0 0 0 10px rgba(186, 221, 241, 0.22), 0 0 22px rgba(120, 189, 223, 0.34);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(186, 221, 241, 0);
    }
}@media (prefers-reduced-motion:reduce){.emergency-steps .emergency-steps__item{transform:none!important}.emergency-steps .emergency-steps__item:after{display:none}}