#CitySection {

    margin-top: 0px;

    @media (max-width: 1239px) {
        .Motto.Appear {
            animation: AppearInside 600ms;
        }
        .Description.Appear {
            animation: AppearBottom 600ms;
        }
    }
    
    @media (min-width: 1240px) {    
        .Motto.Appear {
            animation: AppearInside 600ms;
        }
        .Description.Appear {
            animation: AppearBottom 600ms;
        }
    }

    .Section {
        position: relative;

        overflow: hidden;

        background-color: #101010;

        display: flex;
    }

    .SectionViewport {
        display: flex;
        flex-direction: column;

        background-color: #101010;

        height: auto;
    }

    .Content {
        display: flex;
        flex-direction: column;

        padding: 20px;
        padding-bottom: 30px;

        border-radius: 32px;

        margin-bottom: 36px;

        background-color: #2f2f2f;

        @media (max-width: 1239px) {
            padding: unset;
            background-color: unset;
        }
    }

    .Content img {
        width: 1160px;
        height: 375px;

        object-fit: cover;
        border-radius: 25px;

        margin-bottom: 110px;

        @media (max-width: 1239px) {
            width: unset;
            height: 240px;
            margin-bottom: 100px;
        }
    }

    .Motto {
        color: #fff;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 35px;
        font-style: normal;
        font-weight: 400;
        line-height: 35px;

        margin-bottom: 130px;
        margin-left: 180px;
        margin-right: 180px;

        @media (max-width: 1239px) {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 60px;
            width: 88vw;

            color: #fff;
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: HelveticaNeueCyr;
            font-size: min(5.9vw, 25px);
            font-style: normal;
            font-weight: 550;
            line-height: min(6vw, 25.893px);
        }
    }

    .Motto>.Accent {
        color: #4775FF;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 35px;
        font-style: normal;
        font-weight: 400;
        line-height: 35px;

        @media (max-width: 1239px) {
            color: #4775FF;
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: HelveticaNeueCyr;
            font-size: min(5.9vw, 25px);
            font-style: normal;
            font-weight: 550;
            line-height: min(6vw, 25.893px);
        }
    }

    .Description {
        color: #fff;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 21px;
        font-style: normal;
        font-weight: 400;
        line-height: 21.913px;

        width: 450px;

        margin-left: auto;
        margin-right: auto;

        margin-bottom: 60px;

        @media (max-width: 1239px) {
            width: 250px;

            color: #939393;
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: HelveticaNeueCyr;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 100%; /* 12px */
        }
    }

    .ActionButton {
        width: 28px;
        height: 28px;
        background-color: white;
        border-radius: 28px;

        margin-left: auto;
        margin-right: auto;

        display: flex;
        justify-content: center;
        align-items: center;
    }
}