.brand-page {
    --blue: #4073a4;
    --text: #171717;
    width: 100%;
    overflow: hidden;
    color: var(--text);
    background: #fff;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 400
}

.brand-page *,
.brand-page :after,
.brand-page :before {
    box-sizing: border-box
}

.brand-page h1,
.brand-page h2,
.brand-page h3,
.brand-page p {
    margin: 0
}

.brand-page img {
    display: block;
    max-width: 100%
}

.brand-container {
    width: calc(100% - 120px);
    max-width: 1800px;
    margin-right: auto;
    margin-left: auto
}

.brand-breadcrumb {
    width: calc(100% - 120px);
    max-width: 1800px;
    height: 86px;
    margin: auto;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding-top: 13px;
    color: #343434;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap
}

.brand-breadcrumb a {
    color: inherit;
    text-decoration: none
}

.brand-hero {
    position: relative;
    height: 673px;
    overflow: hidden
}

.brand-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%
}

.brand-hero__panel {
    position: absolute;
    left: 0;
    bottom: 39px;
    width: 50.1%;
    min-height: 269px;
    padding: 43px 60px 42px;
    color: #fff;
    background: rgba(22, 22, 22, .5);
    backdrop-filter: blur(2px)
}

.brand-hero h1 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700
}

.brand-hero__features {
    display: flex;
    gap: 47px;
    margin: 18px 0 36px;
    padding: 0;
    list-style: none
}

.brand-hero__features li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 23px;
    line-height: 1.22;
    white-space: nowrap
}

.brand-hero__features li:before {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid #fff;
    border-radius: 50%
}

.brand-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s ease
}

.brand-button--light {
    min-width: 313px;
    padding: 10px 28px;
    color: #fff;
    border: 1px solid #fff
}

.brand-button--light:hover {
    color: var(--text);
    background: #fff
}

.brand-intro {
    padding: 82px 0 130px
}

.brand-page h2 {
    font-size: 40px;
    line-height: 1.22;
    font-weight: 700
}

.brand-intro p {
    max-width: 1640px;
    margin-top: 51px;
    font-size: 23px;
    line-height: 1.25
}

.brand-design>h2 {
    max-width: 650px;
    margin-bottom: 63px
}

.brand-design-card {
    height: 654px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-radius: 24px;
    background: #f3f3f3
}

.brand-design-card+.brand-design-card {
    margin-top: 24px
}

.brand-design-card__content {
    padding: 39px 50px 39px 90px
}

.brand-design-card__content h3 {
    max-width: 550px;
    margin-bottom: 22px;
    font-size: 38px;
    line-height: 1.12;
    font-weight: 600
}

.brand-feature-list {
    display: grid;
    gap: 24px
}

.brand-feature {
    display: flex;
    min-height: 100px;
    align-items: center;
    gap: 26px;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 700
}

.brand-feature__icon {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    display: grid;
    place-items: center;
    border: 2px solid #cfdae5;
    border-radius: 50%;
    color: var(--blue);
    font-size: 38px
}

.brand-feature__icon img {
    width: 72px;
    height: 72px;
    object-fit: contain
}

.brand-feature__icon--history {
    font-family: Georgia, serif
}

.brand-design-card__visual {
    min-width: 0;
    height: 100%;
    overflow: hidden
}

.brand-design-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.brand-design-card--symbolism .brand-design-card__visual img {
    object-fit: contain;
    transform: scale(1.22)
}

.brand-design-card--history .brand-design-card__content {
    padding-left: 292px
}

.brand-design-card--history .brand-design-card__visual img {
    object-fit: contain;
    transform: scale(1.2);
    transform-origin: right center
}

.brand-technology {
    display: grid;
    grid-template-columns: 1fr 1.13fr;
    gap: 62px;
    padding-top: 140px
}

.brand-technology__copy {
    padding-top: 88px
}

.brand-technology__copy h3 {
    margin-top: 53px;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 400
}

.brand-technology__copy p {
    max-width: 690px;
    margin-top: 10px;
    font-size: 22px;
    line-height: 1.28
}

.brand-technology ol {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: tech
}

.brand-technology li {
    counter-increment: tech;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.16
}

.brand-technology li:before {
    content: counter(tech, decimal-leading-zero);
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    font-size: 17px
}

.brand-technology__visual {
    position: relative;
    min-height: 525px;
    overflow: hidden;
    border-radius: 22px;
    background: #ececec
}

.brand-technology__after {
    position: absolute;
    inset: 0 0 0 26%;
    overflow: hidden
}

.brand-technology__after img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.brand-technology__before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 53%;
    height: 132px;
    overflow: hidden;
    border-radius: 18px;
    background: #bcbcbc
}

.brand-technology__before img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 54%
}

.brand-technology__visual span {
    position: absolute;
    bottom: 18px;
    left: 26px;
    color: #fff;
    font-size: 23px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55)
}

.brand-technology__after>span {
    right: 28px;
    left: auto
}

.brand-usage {
    padding-top: 139px
}

.brand-usage__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 52px;
    margin-top: 76px
}

.brand-usage article {
    text-align: center
}

.brand-usage article img {
    width: 190px;
    height: 190px;
    margin: 0 auto 23px
}

.brand-usage h3 {
    font-size: 23px;
    line-height: 1.2;
    font-weight: 600
}

.brand-usage p {
    max-width: 250px;
    margin: 47px auto 0;
    font-size: 17px;
    line-height: 1.3
}

.brand-examples {
    padding-top: 147px;
    padding-bottom: 140px
}

.brand-examples__layout {
    display: grid;
    grid-template-columns: .91fr 1.09fr;
    gap: 24px;
    height: 1210px;
    margin-top: 64px
}

.brand-examples__small {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 24px
}

.brand-example-card {
    position: relative;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    overflow: hidden;
    border-radius: 24px;
    background: #f3f3f3
}

.brand-example-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.1)
}

.brand-example-card h3 {
    padding: 24px 30px;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 600
}

.brand-example-card h3 span,
.brand-series-card h3 span {
    font-weight: 600
}

.brand-series-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #f3f3f3
}

.brand-series-card__objects {
    position: absolute;
    inset: 0
}

.brand-series-card__objects img {
    position: absolute;
    width: 54%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply
}

.brand-series-card__objects img:first-child {
    top: -3%;
    left: -4%;
    width: 63%
}

.brand-series-card__objects img:nth-child(2) {
    top: 2%;
    right: -8%
}

.brand-series-card__objects img:nth-child(3) {
    top: 34%;
    left: -5%
}

.brand-series-card__objects img:nth-child(4) {
    right: -7%;
    bottom: 4%
}

.brand-series-card h3 {
    position: absolute;
    right: 45px;
    bottom: 48px;
    font-size: 39px;
    line-height: 1.15;
    font-weight: 600;
    text-align: right
}

.brand-final {
    min-height: 709px;
    display: grid;
    grid-template-columns: 33% 67%;
    background: #fff
}

.brand-final__copy {
    position: relative;
    padding: 115px 0 60px 60px
}

.brand-final__copy>h2 {
    color: var(--text);
    font-size: 56px;
    line-height: 1.08
}

.brand-final__card {
    position: absolute;
    bottom: 64px;
    z-index: 2;
    width: 480px;
    padding: 30px 56px;
    border-bottom-left-radius: 16px;
    border-top-left-radius: 16px;
    background: #f3f3f3
}

.brand-final__card p {
    margin-bottom: 30px;
    color: #3fa4e5;
    font-size: 31px;
    line-height: 1.05;
    font-weight: 700
}

.brand-final__card p span {
    font-size: 22px
}

.brand-button--dark {
    width: 100%;
    padding: 10px 24px;
    color: #fff;
    background: #262626
}

.brand-button--dark:hover {
    color: #fff;
    background: #4073a4
}

.brand-final__image {
    min-width: 0;
    margin: 28px 0;
    overflow: hidden;
    border-radius: 24px 0 0 24px
}

.brand-final__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

@media(max-width:1199px) {

    .brand-container,
    .brand-breadcrumb {
        width: calc(100% - 88px)
    }

    .brand-breadcrumb {
        height: 104px;
        padding-top: 17px;
        overflow: hidden
    }

    .brand-hero {
        height: 405px
    }

    .brand-hero__panel {
        bottom: 24px;
        width: 60%;
        min-height: 181px;
        padding: 25px 44px
    }

    .brand-hero h1 {
        font-size: 28px
    }

    .brand-hero__features {
        gap: 18px;
        margin: 12px 0 20px
    }

    .brand-hero__features li {
        gap: 7px;
        font-size: 15px
    }

    .brand-hero__features li:before {
        width: 8px;
        height: 8px;
        border-width: 1px
    }

    .brand-button {
        min-height: 37px;
        font-size: 14px
    }

    .brand-button--light {
        min-width: 232px
    }

    .brand-page h2 {
        font-size: 32px
    }

    .brand-intro {
        padding: 47px 0 83px
    }

    .brand-intro p {
        margin-top: 40px;
        font-size: 17px;
        line-height: 140%;
        font-weight: 400;
    }

    .brand-design>h2 {
        max-width: none;
        margin-bottom: 50px
    }

    .brand-design-card {
        height: 356px;
        border-radius: 16px
    }

    .brand-design-card+.brand-design-card {
        margin-top: 20px
    }

    .brand-design-card__content,
    .brand-design-card--history .brand-design-card__content {
        padding: 23px 35px
    }

    .brand-design-card__content h3 {
        margin-bottom: 14px;
        font-size: 24px
    }

    .brand-feature-list {
        grid-template-columns: 1fr 1fr;
        gap: 13px 20px
    }

    .brand-feature {
        min-height: 62px;
        gap: 12px;
        font-size: 15px
    }

    .brand-feature__icon {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
        font-size: 25px
    }

    .brand-feature__icon img {
        width: 43px;
        height: 43px
    }

    .brand-technology {
        grid-template-columns: .92fr 1.08fr;
        gap: 40px;
        padding-top: 90px
    }

    .brand-technology__copy {
        padding-top: 12px
    }

    .brand-technology__copy h3 {
        margin-top: 37px;
        font-size: 16px
    }

    .brand-technology__copy p {
        font-size: 15px
    }

    .brand-technology li {
        gap: 12px;
        margin-top: 11px;
        font-size: 16px
    }

    .brand-technology li:before {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 11px
    }

    .brand-technology__visual {
        min-height: 339px;
        border-radius: 16px
    }

    .brand-technology__before {
        height: 86px;
        border-radius: 12px
    }

    .brand-technology__visual span {
        bottom: 11px;
        left: 16px;
        font-size: 15px
    }

    .brand-technology__after>span {
        right: 16px
    }

    .brand-usage {
        padding-top: 90px
    }

    .brand-usage__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px 80px;
        margin-top: 49px
    }

    .brand-usage article:nth-child(4) {
        grid-column: 1/2;
        margin-left: 50%
    }

    .brand-usage article:nth-child(5) {
        grid-column: 2/3;
        margin-left: 50%
    }

    .brand-usage article img {
        width: 130px;
        height: 130px;
        margin-bottom: 16px
    }

    .brand-usage h3 {
        font-size: 17px
    }

    .brand-usage p {
        font-size: 13px
    }

    .brand-examples {
        padding-top: 84px;
        padding-bottom: 90px
    }

    .brand-examples__layout {
        height: 630px;
        margin-top: 50px;
        gap: 16px
    }

    .brand-examples__small {
        gap: 16px
    }

    .brand-example-card,
    .brand-series-card {
        border-radius: 14px
    }

    .brand-example-card h3 {
        padding: 15px;
        font-size: 16px
    }

    .brand-series-card h3 {
        right: 25px;
        bottom: 28px;
        font-size: 23px
    }

    .brand-final {
        min-height: 378px;
        grid-template-columns: 42% 58%
    }

    .brand-final__copy {
        padding: 43px 0 35px 44px
    }

    .brand-final__copy>h2 {
        font-size: 44px
    }

    .brand-final__card {
        right: -95px;
        bottom: 34px;
        width: 310px;
        padding: 24px;
        border-radius: 15px
    }

    .brand-final__card p {
        margin-bottom: 18px;
        font-size: 25px
    }
}

@media(max-width:600px) {

    .brand-container,
    .brand-breadcrumb {
        width: calc(100% - 30px)
    }

    .brand-breadcrumb {
        height: 120px;
        padding-top: 12px;
        font-size: 11px;
        gap: 3px
    }

    .brand-breadcrumb a:nth-of-type(2),
    .brand-breadcrumb a:nth-of-type(3),
    .brand-breadcrumb a:nth-of-type(2)+span,
    .brand-breadcrumb a:nth-of-type(3)+span {
        display: none
    }

    .brand-breadcrumb a:first-child:after {
        content: " | …"
    }

    .brand-hero {
        height: 549px;
        overflow: visible
    }

    .brand-hero__image {
        height: 364px;
        object-position: center
    }

    .brand-hero__panel {
        left: 15px;
        right: 15px;
        bottom: 28px;
        width: auto;
        min-height: 239px;
        padding: 17px 18px 25px;
        border-radius: 0;
    }

    .brand-hero h1 {
        max-width: 300px;
        font-size: 20px;
        line-height: 1.05
    }

    .brand-hero__features {
        display: grid;
        gap: 8px;
        margin: 16px 0 25px
    }

    .brand-hero__features li {
        gap: 10px;
        font-size: 15px
    }

    .brand-hero__features li:before {
        width: 7px;
        height: 7px
    }

    .brand-button {
        min-height: auto;
        font-size: 13px;
    }

    .brand-button--light {
        width: 100%;
        min-width: 0;
        padding: 8px;
    }

    .brand-page h2 {
        font-size: 24px;
        line-height: 1.2
    }

    .brand-intro {
        padding: 68px 0 62px
    }

    .brand-intro p {
        margin-top: 26px;
        font-size: 15px;
        line-height: 1.34
    }

    .brand-design>h2 {
        margin-bottom: 31px
    }

    .brand-design-card {
        height: 435px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 0;
        margin-right: -15px;
        margin-left: -15px
    }

    .brand-design-card+.brand-design-card {
        margin-top: 14px
    }

    .brand-design-card__content,
    .brand-design-card--history .brand-design-card__content {
        height: 205px;
        padding: 17px 15px 10px
    }

    .brand-design-card__content h3 {
        margin-bottom: 15px;
        font-size: 20px
    }

    .brand-feature-list {
        grid-template-columns: 1fr 1fr;
        gap: 11px 8px
    }

    .brand-feature {
        min-height: 57px;
        gap: 8px;
        font-size: 12px;
        line-height: 1.15
    }

    .brand-feature__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-width: 1px;
        font-size: 21px
    }

    .brand-feature__icon img {
        width: 36px;
        height: 36px
    }

    .brand-design-card__visual {
        height: 230px;
        order: 2;
        background: #efefef
    }

    .brand-design-card--symbolism .brand-design-card__visual img {
        transform: scale(1.12)
    }

    .brand-design-card--history .brand-design-card__content {
        order: 1
    }

    .brand-design-card--history .brand-design-card__visual img {
        transform: scale(1.07)
    }

    .brand-technology {
        display: block;
        padding-top: 77px
    }

    .brand-technology__copy {
        padding-top: 0
    }

    .brand-technology__copy h3 {
        margin-top: 26px;
        font-size: 14px;
    }

    .brand-technology__copy p {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.3
    }

    .brand-technology ol {
        margin-top: 16px
    }

    .brand-technology li {
        gap: 10px;
        margin-top: 9px;
        font-size: 13px;
        line-height: 1.25
    }

    .brand-technology li:before {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 9px
    }

    .brand-technology__visual {
        min-height: 304px;
        margin-top: 26px;
        border-radius: 12px
    }

    .brand-technology__after {
        left: 23%
    }

    .brand-technology__before {
        width: 54%;
        height: 78px;
        border-radius: 10px
    }

    .brand-technology__visual span {
        bottom: 10px;
        left: 12px;
        font-size: 12px
    }

    .brand-technology__after>span {
        right: 12px
    }

    .brand-usage {
        padding-top: 78px
    }

    .brand-usage__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 31px 10px;
        margin-top: 31px
    }

    .brand-usage article:nth-child(4),
    .brand-usage article:nth-child(5) {
        grid-column: auto;
        margin-left: 0
    }

    .brand-usage article:nth-child(5) {
        grid-column: 1/3;
        width: 180px;
        justify-self: center
    }

    .brand-usage article img {
        width: 166px;
        height: 166px;
        margin-bottom: 12px
    }

    .brand-usage h3 {
        font-size: 15px
    }

    .brand-usage p {
        max-width: 175px;
        margin-top: 28px;
        font-size: 11px;
        line-height: 1.25
    }

    .brand-examples {
        padding-top: 77px;
        padding-bottom: 96px
    }

    .brand-examples__layout {
        display: block;
        height: auto;
        margin-top: 35px
    }

    .brand-examples__small {
        grid-template-rows: repeat(4, 119px);
        gap: 10px
    }

    .brand-example-card {
        border-radius: 10px;
        grid-template-columns: 45% 55%
    }

    .brand-example-card h3 {
        padding: 12px;
        font-size: 14px
    }

    .brand-series-card {
        height: 454px;
        margin-top: 10px;
        border-radius: 10px
    }

    .brand-series-card h3 {
        right: 20px;
        bottom: 22px;
        font-size: 20px
    }

    .brand-final {
        min-height: 657px;
        display: flex;
        flex-direction: column
    }

    .brand-final__copy {
        display: contents
    }

    .brand-final__copy>h2 {
        order: 1;
        padding: 34px 15px 17px;
        font-size: 38px;
        line-height: 1
    }

    .brand-final__image {
        order: 2;
        height: 260px
    }

    .brand-final__card {
        position: relative;
        right: auto;
        bottom: auto;
        order: 3;
        width: calc(100% - 30px);
        margin: -26px auto 30px;
        padding: 24px 18px 18px;
        border-radius: 0;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .brand-final__card p {
        margin-bottom: 22px;
        font-size: 29px;
        line-height: 1.05
    }
}

/* Exact tablet layout for the usage cards from the 1024px Figma frame. */
@media(min-width:601px) and (max-width:1199px) {
    .brand-usage__grid {
        grid-template-columns: repeat(3, 24.608%);
        column-gap: 13.034%;
        row-gap: 50px;
        justify-content: center;
        margin-top: 49px
    }

    .brand-usage article {
        width: 100%;
        min-height: 341px;
        margin: 0
    }

    .brand-usage article:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 2;
        width: 39.53%;
        margin: 0;
        justify-self: center
    }

    .brand-usage article:nth-child(5) {
        grid-column: 2 / 4;
        grid-row: 2;
        width: 39.53%;
        margin: 0;
        justify-self: center
    }

    .brand-usage article img {
        display: block;
        width: min(218.5px, 94.86%);
        height: auto;
        aspect-ratio: 1;
        margin: 0 auto 26px
    }

    .brand-usage h3 {
        font-size: 20px;
        line-height: 1.2
    }

    .brand-usage p {
        width: 100%;
        max-width: none;
        margin: 31px auto 0;
        font-size: 14px;
        line-height: 1.2
    }
}

/* Keep all usage descriptions on one baseline when the last desktop title wraps. */
@media(min-width:1200px) {
    .brand-usage article:nth-child(5) p {
        transform: translateY(-27.6px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .brand-button {
        transition: none
    }
}

@media(max-width:1199px) {
    .brand-final {
        grid-template-columns: 34% 66%;
        background: #fff
    }

    .brand-final__copy {
        padding: 57px 0 35px 44px
    }

    .brand-final__copy>h2 {
        color: var(--text);
        font-size: 36px;
        line-height: 1.08
    }

    .brand-final__card {
        right: 14px;
        bottom: 34px;
        width: 285px;
        padding: 18px 28px;
        border-radius: 12px;
        background: #f3f3f3
    }

    .brand-final__card p {
        margin-bottom: 14px;
        color: #3fa4e5;
        font-size: 21px;
        line-height: 1.05
    }

    .brand-final__card p span {
        font-size: 15px
    }

    .brand-final__image {
        margin: 18px 0;
        border-radius: 15px 0 0 15px
    }
}

@media(max-width:600px) {
    .brand-final__copy>h2 {
        padding: 34px 15px 17px;
        color: var(--text);
        font-size: 38px
    }

    .brand-final__image {
        height: 260px;
        margin: 0 0 0 15px;
        border-radius: 12px 0 0 12px
    }

    .brand-final__card {
        right: auto;
        bottom: auto;
        width: calc(100% - 30px);
        margin: -26px auto 30px;
        padding: 24px 18px 18px
    }

    .brand-final__card p {
        margin-bottom: 22px;
        font-size: 29px
    }

    .brand-final__card p span {
        font-size: 20px
    }
}

.breadcrumbs-container {
    display: none !important
}

.brand-page {
    padding-bottom: 140px
}

.brand-design-card--symbolism {
    grid-template-columns: 34% 66%
}

.brand-design-card--symbolism .brand-design-card__visual img,
.brand-design-card--history .brand-design-card__visual img {
    object-fit: cover;
    transform: none
}

.brand-design-card--history {
    grid-template-columns: 47.1% 52.9%
}

.brand-feature__icon--history {
    border: 0
}

.brand-feature__icon--history img {
    width: 100%;
    height: 100%
}

@media(min-width:601px) and (max-width:1199px) {
    .brand-design-card--symbolism {
        grid-template-columns: 37.6% 62.4%
    }

    .brand-design-card--history {
        grid-template-columns: 47.1% 52.9%
    }

    .brand-feature-list {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .brand-feature {
        min-height: 62px
    }

    .brand-design-card--history .brand-design-card__content {
        padding: 23px 25px 23px 210px
    }
}

@media(max-width:600px) {
    .brand-page {
        padding-bottom: 120px
    }

    .brand-breadcrumb {
        height: 58px
    }

    .brand-design-card--symbolism,
    .brand-design-card--history {
        display: flex
    }

    .brand-design-card__content,
    .brand-design-card--history .brand-design-card__content {
        height: 174px;
        flex: 0 0 174px
    }

    .brand-design-card__visual {
        height: 261px;
        flex: 0 0 261px
    }

    .brand-design-card--symbolism .brand-design-card__visual img,
    .brand-design-card--history .brand-design-card__visual img {
        object-fit: cover
    }

    .brand-technology {
        padding-bottom: 44px
    }

    .brand-usage article {
        min-height: 267px
    }

    .brand-final {
        position: relative
    }

    .brand-final__copy>h2 {
        height: 82px;
        padding: 0 15px 12px;
        position: relative;
        z-index: 2
    }

    .brand-final__image {
        height: 432px;
        margin: -42px 0 0;
        clip-path: polygon(68% 0, 100% 0, 100% 100%, 0 100%, 0 42px, 68% 42px);
        border-radius: 0
    }

    .brand-final__card {
        height: 185px;
        margin: 0 15px;
        padding: 26px 18px 18px;
        border-radius: 0;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .brand-final__card p {
        text-align: center;
    }
}

/* Exact geometry of the 1920px Figma frame. */
.brand-examples__layout,
.brand-examples__small,
.brand-example-card,
.brand-series-card {
    min-height: 0
}

.brand-example-card img {
    min-height: 0
}

.brand-technology li {
    position: relative;
    display: block;
    padding-left: 36px;
    color: #3a3a3a
}

.brand-technology li:before {
    content: counter(tech) ".";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: auto;
    height: auto;
    color: inherit;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
    line-height: inherit
}

@media(min-width:1200px) {
    .brand-hero__features {
        justify-content: space-between;
        gap: 0
    }

    .brand-hero__features li {
        gap: 10px;
        font-size: 21px
    }

    .brand-design-card--history .brand-design-card__content {
        min-width: 0;
        overflow: hidden;
        padding: 40px 48px 39px 42.44%
    }

    .brand-design-card__content h3 {
        font-size: 32px
    }

    .brand-feature {
        font-size: 22px
    }

    .brand-technology {
        grid-template-columns: 800fr 1002fr;
        gap: 0
    }

    .brand-technology__copy {
        padding-top: 88px;
        padding-right: 60px
    }

    .brand-technology__visual {
        height: 525px;
        min-height: 0
    }

    .brand-technology__after {
        inset: 0
    }

    .brand-technology__after>span {
        right: auto;
        left: 28px
    }

    .brand-technology__before {
        right: 0;
        left: auto;
        width: 43.12%;
        height: 132px
    }

    .brand-examples {
        padding-top: 220px
    }

    .brand-examples__layout {
        grid-template-columns: 1fr 1fr;
        overflow: hidden
    }

    .brand-examples__small,
    .brand-series-card {
        height: 1210px;
        overflow: hidden
    }

    .brand-example-card {
        display: block;
        position: relative;
        overflow: hidden;
        background: #f4f6f8
    }

    .brand-example-card img {
        position: absolute;
        width: auto;
        height: auto;
        max-width: none;
        transform: none
    }

    .brand-example-card h3 {
        position: absolute;
        width: 454px;
        padding: 0;
        font-size: 32px;
        line-height: 1.2
    }

    .brand-example-card:nth-child(odd) h3 {
        top: 104px;
        left: 69px
    }

    .brand-example-card:nth-child(even) h3 {
        top: 104px;
        left: 342px
    }

    .brand-example-card:nth-child(1) img {
        top: 0;
        left: 523px;
        width: 320px;
        height: 320px
    }

    .brand-example-card:nth-child(2) img {
        top: -20px;
        left: 0;
        width: 325px;
        height: 325px
    }

    .brand-example-card:nth-child(3) img {
        top: -8px;
        left: 521px;
        width: 342px;
        height: 342px
    }

    .brand-example-card:nth-child(4) img {
        top: 8px;
        left: 9px;
        width: 277px;
        height: 277px
    }

    .brand-series-card {
        background: #f4f6f8
    }

    .brand-series-card__objects img {
        height: auto;
        max-width: none;
        transform: none
    }

    .brand-series-card__objects img:first-child {
        top: 51.53%;
        left: 12.5%;
        width: 88.18%
    }

    .brand-series-card__objects img:nth-child(2) {
        top: 14.86%;
        right: auto;
        left: 43.58%;
        width: 56.42%
    }

    .brand-series-card__objects img:nth-child(3) {
        top: 41.12%;
        left: 0;
        width: 45.5%
    }

    .brand-series-card__objects img:nth-child(4) {
        right: auto;
        bottom: auto;
        top: 43.85%;
        left: 43.58%;
        width: 41.78%
    }

    .brand-series-card h3 {
        top: 50px;
        right: auto;
        bottom: auto;
        left: 62px;
        width: 454px;
        font-size: 32px;
        line-height: 1.2;
        text-align: left
    }

    .brand-final {
        height: 709px;
        min-height: 0;
        grid-template-columns: 33% 67%;
        overflow: hidden
    }

    .brand-final__copy {
        padding: 217px 0 0 60px
    }

    .brand-final__copy>h2 {
        font-size: 73.312px;
        line-height: 1;
        letter-spacing: 0
    }

    .brand-final__card {
        top: 427px;
        right: 0;
        bottom: auto;
        width: 481px;
        height: 226px;
        padding: 35px 55px;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px
    }

    .brand-final__card p {
        margin-bottom: 24px;
        font-size: 47.67px;
        line-height: 1;
        white-space: nowrap
    }

    .brand-final__card p span {
        font-size: 32.992px
    }

    .brand-final__image {
        height: 657px;
        margin: 26px 60px 26px -16px;
        border-radius: 16px
    }
}

@media(min-width:601px) and (max-width:1199px) {
    .brand-usage article {
        min-height: 341px
    }

    .brand-design-card__content {
        padding: 20.8px 46.8px
    }

    .brand-design-card--history .brand-design-card__content {
        padding: 20.8px 25px 20.8px 210px
    }

    .brand-design-card__content h3 {
        font-size: 18px;
        line-height: 1.2
    }

    .brand-design-card--symbolism .brand-design-card__content h3 {
        margin-bottom: 42px
    }

    .brand-design-card--history .brand-design-card__content h3 {
        margin-bottom: 21px
    }

    .brand-feature-list {
        gap: 14px
    }

    .brand-feature {
        min-height: 52px;
        gap: 13px;
        font-size: 14px
    }

    .brand-feature__icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px
    }

    .brand-feature__icon img {
        width: 36px;
        height: 36px
    }

    .brand-technology li {
        padding-left: 26px
    }

    .brand-examples__layout {
        grid-template-columns: 1fr 1fr
    }

    .brand-example-card {
        display: block;
        position: relative
    }

    .brand-example-card img {
        position: absolute;
        width: auto;
        height: auto;
        max-width: none;
        transform: none
    }

    .brand-example-card h3 {
        position: absolute;
        width: 236px;
        padding: 0;
        font-size: 16px;
        line-height: 1.2
    }

    .brand-example-card:nth-child(odd) h3 {
        top: 55px;
        left: 39px
    }

    .brand-example-card:nth-child(even) h3 {
        top: 55px;
        left: 178px
    }

    .brand-example-card:nth-child(1) img {
        top: 0;
        left: 272px;
        width: 166px;
        height: 166px
    }

    .brand-example-card:nth-child(2) img {
        top: -10px;
        left: 0;
        width: 169px;
        height: 169px
    }

    .brand-example-card:nth-child(3) img {
        top: -4px;
        left: 271px;
        width: 178px;
        height: 178px
    }

    .brand-example-card:nth-child(4) img {
        top: 4px;
        left: 5px;
        width: 144px;
        height: 144px
    }

    .brand-series-card__objects img {
        height: auto;
        max-width: none;
        transform: none
    }

    .brand-series-card__objects img:first-child {
        top: 51.53%;
        left: 12.5%;
        width: 88.18%
    }

    .brand-series-card__objects img:nth-child(2) {
        top: 14.86%;
        right: auto;
        left: 43.58%;
        width: 56.42%
    }

    .brand-series-card__objects img:nth-child(3) {
        top: 41.12%;
        left: 0;
        width: 45.5%
    }

    .brand-series-card__objects img:nth-child(4) {
        right: auto;
        bottom: auto;
        top: 43.85%;
        left: 43.58%;
        width: 41.78%
    }

    .brand-series-card h3 {
        top: 32px;
        right: auto;
        bottom: auto;
        left: 32px;
        width: 236px;
        font-size: 16px;
        line-height: 1.2;
        text-align: left
    }

    .brand-final {
        height: 378px;
        min-height: 0;
        grid-template-columns: 37.11% 62.89%;
        overflow: hidden
    }

    .brand-final__copy {
        padding: 116px 0 0 32px
    }

    .brand-final__copy>h2 {
        font-size: 39.1px;
        line-height: 1
    }

    .brand-final__card {
        top: 207px;
        right: auto;
        bottom: auto;
        left: 92px;
        width: 282px;
        height: 140px;
        padding: 13px 20px;
        border-radius: 0;
        border-top-left-radius: 9px;
        border-bottom-left-radius: 9px;
    }

    .brand-final__card p {
        margin-bottom: 15px;
        font-size: 30.65px;
        line-height: 1;
        white-space: nowrap
    }

    .brand-final__card p span {
        font-size: 21.2px
    }

    .brand-final__card .brand-button {
        min-height: 28px;
        font-size: 7px
    }

    .brand-final__image {
        height: 350px;
        margin: 14px 32px 14px 0;
        border-radius: 9px
    }
}

@media(max-width:600px) {
    .brand-technology {
        padding-top: 96px;
        padding-bottom: 0
    }

    .brand-technology__visual {
        margin-top: 60px
    }

    .brand-technology li {
        padding-left: 22px
    }

    .brand-examples {
        padding-top: 89px
    }

    .brand-example-card:nth-child(odd) img {
        grid-column: 2
    }

    .brand-example-card:nth-child(odd) h3 {
        grid-column: 1;
        grid-row: 1
    }

    .brand-example-card:nth-child(even) img {
        grid-column: 1
    }

    .brand-example-card:nth-child(even) h3 {
        grid-column: 2;
        grid-row: 1
    }
}

/* Figma fidelity: hero and before/after composition. */
.brand-technology__visual {
    background: #fff
}

.brand-technology__before {
    background: #fff;
    border-radius: 0
}

.brand-technology__before-pattern {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 12px
}

.brand-technology__before-pattern img {
    position: absolute;
    top: 50%;
    left: 60.4%;
    width: 31%;
    height: 398%;
    max-width: none;
    object-fit: cover;
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: .61
}

.brand-technology__before-pattern>span {
    z-index: 1;
    color: #111;
    text-shadow: none
}

@media(min-width:1200px) {
    .brand-hero__image {
        position: absolute;
        top: -54.44%;
        left: -2.248%;
        width: 104.705%;
        height: 171.34%;
        max-width: none !important;
        object-fit: cover
    }

    .brand-hero h1 {
        font-size: 38px
    }

    .brand-technology__visual {
        border-radius: 18px
    }

    .brand-technology__after {
        -webkit-mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/technology-mask-desktop.svg');
        mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/technology-mask-desktop.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: right top;
        mask-position: right top;
        -webkit-mask-size: calc(100% + 24px) 100%;
        mask-size: calc(100% + 24px) 100%
    }

    .brand-technology__before {
        width: 43.12%;
        height: 25.143%;
        border-radius: 0
    }

    .brand-technology__before-pattern {
        border-radius: 14px
    }

    .brand-technology__before-pattern>span {
        bottom: 18px;
        left: 26px
    }
}

@media(min-width:601px) and (max-width:1199px) {
    .brand-hero__image {
        position: absolute;
        top: -41.43%;
        left: -7.61%;
        width: 109.45%;
        height: 158.71%;
        max-width: none !important;
        object-fit: fill
    }

    .brand-hero__panel {
        bottom: 24px;
        width: 66.211%;
        height: 165px;
        min-height: 0;
        padding: 20px 43px 19px
    }

    .brand-hero h1 {
        font-size: 22px;
        line-height: 24px
    }

    .brand-hero__features {
        gap: 36px;
        margin: 14px 0 37px
    }

    .brand-hero__features li {
        gap: 8px;
        font-size: 15px;
        line-height: 20px
    }

    .brand-button {
        min-height: 31px;
        font-size: 12px
    }

    .brand-button--light {
        min-width: 202px;
        padding: 6px 16px
    }

    .brand-technology {
        grid-template-columns: 371px 480px;
        gap: 84px;
        align-items: end;
    }

    .brand-technology__copy {
        padding-top: 65px
    }

    .brand-technology__copy h3 {
        margin-top: 50px
    }

    .brand-technology__copy p {
        margin-top: 6px
    }

    .brand-technology ol {
        margin-top: 22px
    }

    .brand-technology__visual {
        height: 339px;
        min-height: 0;
        border-radius: 9px
    }

    .brand-technology__after {
        inset: 0
    }

    .brand-technology__after {
        -webkit-mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/technology-mask-tablet.svg');
        mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/technology-mask-tablet.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: left top;
        mask-position: left top;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%
    }

    .brand-technology__before {
        right: 0;
        left: auto;
        width: 46.698%;
        height: 20.204%;
        border-radius: 0;
        box-shadow: none
    }

    .brand-technology__before-pattern {
        border-radius: 9px
    }

    .brand-technology__visual span {
        bottom: 11px;
        left: 14px;
        font-size: 12px
    }

    .brand-technology__after>span {
        right: auto;
        left: 16px
    }
}

@media(max-width:600px) {
    .brand-technology__before {
        width: 57%;
        height: 92px;
        border-radius: 0
    }

    .brand-technology__before-pattern {
        border-radius: 9px
    }
}

/* The replacement SVG files already include the complete circular background. */
.brand-feature__icon {
    border: 0;
    background: transparent
}

.brand-feature__icon img {
    width: 100%;
    height: 100%
}

.brand-hero__features li:before {
    width: 4px;
    height: 4px;
    border: 0;
    background: #fff
}

/* Figma fidelity: the symbolism visual consists of a narrow scene and a large transparent pavilion. */
.brand-design-card--symbolism {
    background: #f4f6f8
}

.brand-design-card--symbolism .brand-design-card__content {
    position: relative;
    z-index: 3
}

.brand-design-card--symbolism .brand-design-card__visual {
    position: relative;
    overflow: hidden
}

.brand-design-card--symbolism .brand-design-card__scene {
    position: absolute;
    z-index: 1;
    overflow: hidden
}

.brand-design-card--symbolism .brand-design-card__scene img {
    position: absolute;
    top: -23.41%;
    left: -124.63%;
    width: 286.12%;
    height: 133.72%;
    max-width: none;
    object-fit: fill;
    transform: none;
}

.brand-design-card--symbolism .brand-design-card__visual>.brand-design-card__object {
    position: absolute;
    z-index: 2;
    top: -41.37%;
    left: -41.13%;
    width: 180.43%;
    height: 170.5%;
    max-width: none;
    object-fit: fill;
    transform: none;
}

@media(min-width:1200px) {
    .brand-design-card--symbolism {
        grid-template-columns: 39% 61%
    }

    .brand-design-card--symbolism .brand-design-card__scene {
        top: -9.64%;
        left: 38.218%;
        width: 61.796%;
        height: 125.012%
    }
}

@media(min-width:601px) and (max-width:1199px) {
    .brand-design-card--symbolism {
        grid-template-columns: 37.056% 62.944%
    }

    .brand-design-card--symbolism .brand-design-card__scene {
        top: -9.64%;
        left: 38.218%;
        width: 61.796%;
        height: 125.012%
    }
}

@media(max-width:600px) {
    .brand-design-card--symbolism .brand-design-card__scene {
        inset: 0;
        width: 100%;
        height: 100%
    }

    .brand-design-card--symbolism .brand-design-card__scene img {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .brand-design-card--symbolism .brand-design-card__object {
        display: none
    }
}

/* Figma fidelity: the history visual uses a cropped park scene plus a transparent canopy. */
.brand-design-card--history {
    position: relative;
    background: #f4f6f8
}

.brand-design-card--history .brand-design-card__content {
    position: relative;
    z-index: 5;
    background: transparent !important
}

.brand-design-card--history .brand-design-card__visual {
    position: static;
    overflow: visible
}

.brand-design-card--history .brand-design-card__scene {
    position: absolute;
    z-index: 1;
    top: -.438%;
    left: -9.889%;
    width: 57%;
    height: 110.281%;
    overflow: hidden;
    border-radius: inherit;
}

.brand-design-card--history .brand-design-card__scene img {
    position: absolute;
    inset: 0 auto auto 0;
    width: 147.26%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    transform: none;
}

.brand-design-card--history .brand-design-card__visual>.brand-design-card__object {
    position: absolute;
    z-index: 4;
    top: 0;
    left: -9.889%;
    width: 83.052%;
    height: 109.258%;
    max-width: none;
    object-fit: fill;
    transform: none;
}

@media(max-width:600px) {
    .brand-design-card--history .brand-design-card__visual {
        position: relative;
        overflow: hidden
    }

    .brand-design-card--history .brand-design-card__scene {
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0
    }

    .brand-design-card--history .brand-design-card__scene img {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .brand-design-card--history .brand-design-card__object {
        display: none
    }
}

/* Exact mobile layouts from Figma (400px frame). */
@media(max-width:600px) {
    .brand-design-card {
        height: 435px;
        border-radius: 6px
    }

    .brand-design-card__content,
    .brand-design-card--history .brand-design-card__content {
        height: 173px;
        flex: 0 0 173px;
        padding: 14px 15px 0
    }

    .brand-design-card__content h3 {
        margin: 0 0 25px;
        font-size: 14px;
        line-height: 1.2
    }

    .brand-feature-list {
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        row-gap: 14px
    }

    .brand-feature {
        min-height: 37px;
        gap: 10px;
        font-size: 12px;
        line-height: 1.2
    }

    .brand-feature__icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px
    }

    .brand-feature__icon img {
        width: 100%;
        height: 100%
    }

    .brand-design-card__visual {
        position: relative;
        height: 262px;
        flex: 0 0 262px;
        background: transparent
    }

    .brand-design-card--symbolism .brand-design-card__scene {
        top: 0;
        left: 42.5%;
        width: 62.25%;
        height: 116.03%;
        border-radius: 6px
    }

    .brand-design-card--symbolism .brand-design-card__scene img {
        top: -23.41%;
        left: -124.63%;
        width: 286.12%;
        height: 133.72%;
        object-fit: fill
    }

    .brand-design-card--symbolism .brand-design-card__visual>.brand-design-card__object {
        display: block;
        top: -29.44%;
        left: -37.35%;
        width: 181.68%;
        height: 158.18%;
        object-fit: fill
    }

    .brand-design-card--history .brand-design-card__scene {
        top: 0;
        left: -44.5%;
        width: 104.75%;
        height: 117.56%;
        border-radius: 8px
    }

    .brand-design-card--history .brand-design-card__scene img {
        inset: 0 auto auto 0;
        width: 147.26%;
        height: 100%;
        object-fit: fill
    }

    .brand-design-card--history .brand-design-card__visual>.brand-design-card__object {
        display: block;
        top: .382%;
        left: -44.5%;
        width: 152.735%;
        height: 116.412%;
        object-fit: fill
    }

    .brand-technology__visual {
        height: 304px;
        min-height: 304px;
        margin-top: 26px;
        border-radius: 6px
    }

    .brand-technology__after {
        inset: 0;
        -webkit-mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/technology-mask-mobile.svg');
        mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/technology-mask-mobile.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: left top;
        mask-position: left top;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%
    }

    .brand-technology__before {
        right: 0;
        left: auto;
        width: 46.757%;
        height: 68px;
        border-radius: 0;
        box-shadow: none
    }

    .brand-technology__before-pattern {
        border-radius: 6px
    }

    .brand-technology__visual span {
        bottom: 8px;
        left: 13px;
        font-size: 12px
    }

    .brand-technology__after>span {
        right: auto;
        left: 13px
    }

    .brand-technology__before-pattern>span {
        left: 10px
    }

    .brand-series-card {
        height: 454px;
        margin-top: 10px;
        border-radius: 7px;
        background: #f4f6f8
    }

    .brand-series-card__objects img {
        height: auto;
        max-width: none;
        transform: none;
        mix-blend-mode: multiply
    }

    .brand-series-card__objects img:first-child {
        top: 32.599%;
        left: 17.568%;
        width: 88.176%
    }

    .brand-series-card__objects img:nth-child(2) {
        top: 12.335%;
        right: auto;
        left: 47.027%;
        width: 52.973%
    }

    .brand-series-card__objects img:nth-child(3) {
        top: 24.89%;
        left: -3.514%;
        width: 45.495%
    }

    .brand-series-card__objects img:nth-child(4) {
        right: auto;
        bottom: auto;
        top: 72.026%;
        left: -1.622%;
        width: 41.779%
    }

    .brand-series-card h3 {
        top: 29px;
        right: auto;
        bottom: auto;
        left: 31px;
        width: 190px;
        padding: 0;
        font-size: 14px;
        line-height: 1.2;
        text-align: left
    }
}

/* Keep the final CTA rules last: older responsive overrides above must not reopen the gap. */
@media(min-width:1200px) {
    .brand-final {
        position: relative;
        height: 709px;
        min-height: 0;
        grid-template-columns: 32.1875% 67.8125%;
        overflow: hidden
    }

    .brand-final__copy {
        position: relative;
        padding: 217px 0 0 60px
    }

    .brand-final__copy>h2 {
        font-size: 73.312px;
        line-height: 1.2
    }

    .brand-final__card {
        top: 427px;
        right: 0;
        bottom: auto;
        left: auto;
        width: 481px;
        height: 226px;
        padding: 35px 49px 35px 55px;
        border-radius: 16px 0 0 16px
    }

    .brand-final__image {
        height: 657px;
        margin: 26px 60px 26px 0;
        border-radius: 16px
    }

    .brand-final__image img {
        position: relative;
        top: -3.97%;
        left: 0;
        width: 100%;
        height: 107.94%;
        max-width: none;
        object-fit: fill
    }
}

@media(min-width:601px) and (max-width:1199px) {
    .brand-final {
        position: relative;
        height: 378px;
        min-height: 0;
        grid-template-columns: 37.109375% 62.890625%;
        overflow: hidden
    }

    .brand-final__copy {
        position: relative;
        padding: 96px 0 0 44px
    }

    .brand-final__copy>h2 {
        font-size: 39.1px;
        line-height: 1.2
    }

    .brand-final__card {
        top: 218px;
        right: 0;
        bottom: auto;
        left: auto;
        width: 282px;
        height: 135px;
        padding: 13px 19.6px 13px 20px;
        border-radius: 9px 0 0 9px;
    }

    .brand-final__card p {
        margin-bottom: 14.667px;
        font-size: 30.65px;
        line-height: 1;
        white-space: nowrap
    }

    .brand-final__card p span {
        font-size: 21.213px
    }

    .brand-final__card .brand-button {
        min-height: 27.902px;
        padding: 5.813px;
        font-size: 12px
    }

    .brand-final__image {
        height: 350px;
        margin: 14px 44px 14px 0;
        border-radius: 8.533px
    }

    .brand-final__image img {
        position: relative;
        top: -4.01%;
        left: -8.24%;
        width: 108.24%;
        height: 108.07%;
        max-width: none;
        object-fit: fill
    }
}

@media(max-width:600px) {
    .brand-final {
        position: relative;
        display: block;
        height: 657px;
        min-height: 657px;
        overflow: hidden;
        background: #fff
    }

    .brand-final__copy {
        position: static;
        display: block;
        padding: 0
    }

    .brand-final__copy>h2 {
        position: absolute;
        z-index: 3;
        top: -.3px;
        left: 15px;
        width: 279px;
        height: auto;
        margin: 0;
        padding: 0;
        font-size: 35.884px;
        line-height: 1.1104;
        white-space: nowrap
    }

    .brand-final__image {
        position: absolute;
        z-index: 1;
        top: -13px;
        left: -118px;
        width: 957px;
        height: 485px;
        margin: 0;
        overflow: hidden;
        border-radius: 16px;
        clip-path: none;
        -webkit-mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/final-mask-mobile.svg');
        mask-image: url('/brendirovanie-dlya-administratsiy/images/branding/final-mask-mobile.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 81px 52px;
        mask-position: 81px 52px;
        -webkit-mask-size: 466px 433px;
        mask-size: 466px 433px
    }

    .brand-final__image img {
        position: absolute;
        top: -8.37%;
        left: .35%;
        width: 99.65%;
        height: 112.51%;
        max-width: none;
        object-fit: fill;
        object-position: center
    }

    .brand-final__card {
        position: absolute;
        z-index: 1;
        top: 365px;
        right: 15px;
        bottom: auto;
        left: 15px;
        width: auto;
        height: 292px;
        margin: 0;
        padding: 125px 17px 19px 18px;
        border-radius: 12.208px;
        background: #f4f6f8
    }

    .brand-final__card p {
        margin: 0 0 24.601px;
        color: #3e97d7;
        font-size: 42.263px;
        line-height: 1;
        font-weight: 700;
        text-transform: none;
        white-space: nowrap
    }

    .brand-final__card p br {
        display: none
    }

    .brand-final__card p span {
        display: block;
        margin-top: 7.414px;
        font-size: 29.121px;
        line-height: 1
    }

    .brand-final__card .brand-button {
        width: 100%;
        min-height: 44.482px;
        padding: 9.267px;
        border-radius: 8px;
        font-size: 18.53px;
        line-height: 1.2
    }
}

/* Fluid examples layout between the 1024px and 1920px reference frames. */
.brand-example-card h3 {
    min-width: 0;
    overflow-wrap: break-word
}

@media(min-width:1200px) {
    .brand-example-card h3 {
        width: 50.45%;
        font-size: clamp(20px, 1.667vw, 32px)
    }

    .brand-example-card:nth-child(odd) h3 {
        left: 7.67%
    }

    .brand-example-card:nth-child(even) h3 {
        left: 38%
    }

    .brand-example-card:nth-child(1) img {
        left: 58.11%;
        width: 35.56%;
        height: auto
    }

    .brand-example-card:nth-child(2) img {
        left: 0;
        width: 36.12%;
        height: auto
    }

    .brand-example-card:nth-child(3) img {
        left: 57.89%;
        width: 38%;
        height: auto
    }

    .brand-example-card:nth-child(4) img {
        left: 1%;
        width: 30.78%;
        height: auto
    }

    .brand-series-card h3 {
        left: 6.89%;
        width: 50.45%;
        font-size: clamp(20px, 1.667vw, 32px)
    }
}

@media(min-width:601px) and (max-width:1199px) {
    .brand-example-card h3 {
        width: 51.31%;
        font-size: clamp(12px, 1.563vw, 16px)
    }

    .brand-example-card:nth-child(odd) h3 {
        left: 8.48%
    }

    .brand-example-card:nth-child(even) h3 {
        left: 38.7%
    }

    .brand-example-card:nth-child(1) img {
        left: 59.13%;
        width: 36.09%;
        height: auto
    }

    .brand-example-card:nth-child(2) img {
        left: 0;
        width: 36.74%;
        height: auto
    }

    .brand-example-card:nth-child(3) img {
        left: 58.91%;
        width: 38.7%;
        height: auto
    }

    .brand-example-card:nth-child(4) img {
        left: 1.09%;
        width: 31.31%;
        height: auto
    }

    .brand-series-card h3 {
        left: 6.96%;
        width: 51.31%;
        font-size: clamp(12px, 1.563vw, 16px)
    }
}

/* Keep product renders vertically centered as their fluid size changes. */
@media(min-width:601px) {
    .brand-example-card:nth-child(-n+4) img {
        top: 50%;
        transform: translateY(-50%)
    }
}