.referal__page {
    .title__block {
        color: var(--Base-Dark, #171717);
        font-size: 40px;
        font-weight: 500;
        line-height: 130%;
        letter-spacing: 0.8px;
        margin-bottom:32px;
    }
    .banner__section {
        .banner__block {
            height:675px;
            overflow:hidden;
            border-radius: 24px;
            position:relative;
            padding:40px 100px;
            box-sizing:border-box;

            img {
                border-radius: 24px;
                height:100%;
                position:absolute;
                top:50%;
                left:50%;
                transform: translate(-50%, -50%);
                object-fit: cover;
            }

            .banner__content {
                position:relative;
                z-index:9;
                height:100%;
                display:flex;
                flex-direction: column;
                justify-content: center;
                max-width:600px;

                .banner__content-title {
                    color: var(--Base-White, #FFF);
                    font-size: 56px;
                    font-weight: 700;
                    line-height: 120%;
                    letter-spacing: 1.12px;
                    margin-bottom:24px;
                }

                .banner__content-text {
                    color: var(--Gray-3, #E5E5E6);
                    font-size: 26px;
                    font-weight: 600;
                    line-height: 130%;
                    letter-spacing: 0.52px;
                    padding-right:70px;
                    box-sizing:border-box;
                }

                .banner__buttons {
                    margin-top:56px;
                    display:flex;
                    gap:16px;

                    .button {
                        min-width:150px;
                    }

                }
            }
        }
    }

    .club__section {
        .club__block {
            .club__block-info {
                display:flex;
                justify-content:space-between;
                gap:32px;
                align-items:stretch;

                .club__block-image {
                    flex:1 0 calc(calc(100% / 2) - 32px);
                    border-radius: 12px;
                    overflow:hidden;
                    box-sizing:border-box;
                    padding:40px;
                    position:relative;
                    min-height:561px;
                    display:flex;
                    flex-direction:column;
                    justify-content:end;

                    & > img {
                        position:absolute;
                        top:50%;
                        left:50%;
                        width:100%;
                        height:100%;
                        transform:translate(-50%, -50%);
                        object-fit: cover;
                    }

                    .club__subscriptions-block {
                        position:relative;
                        z-index:9;
                        max-width:369px;
                        max-width:369px;
                        padding:24px;
                        border-radius: 8px;
                        background: var(--Base-White, #FFF);

                        .club__subscriptions-items {
                            display:flex;

                            .club__subscriptions-item {
                                margin-right:-10px;
                                width:48px;
                                height:48px;
                                display:flex;
                                align-items: center;
                                justify-content:space-between;
                                overflow:hidden;
                                border-radius: 100px;

                                img {
                                    max-width:100%;
                                    border-radius: 100px;
                                }
                            }
                            .club__subscriptions-item--last {
                                display:flex;
                                align-items:center;
                                justify-content: center;
                                width:48px;
                                height:48px;
                                padding-left:7px;
                                padding-right:7px;
                                box-sizing:border-box;
                                background:#92111C;
                                color: var(--Base-White, #FFF);
                                font-size: 14px;
                                line-height: 140%;
                                letter-spacing: 0.14px;
                            }
                        }
                        .club__subscriptions-text {
                            color: var(--Base-Dark, #171717);
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 140%;
                            letter-spacing: 0.16px;
                            margin-top:12px;
                        }

                    }
                }
                .club__block-content {
                    flex:1 0 calc(calc(100% / 2) - 32px);
                    box-sizing:border-box;
                    padding:40px 36px;

                    .club__content {
                        height:100%;
                        display:flex;
                        justify-content:space-between;
                        flex-direction: column;
                        .club__content-top {
                            .club__content-title {
                                color: var(--Base-Dark, #171717);
                                font-size: 40px;
                                font-weight: 500;
                                line-height: 130%;
                                letter-spacing: 0.8px;
                                margin-bottom:24px;
                            }
                            .club__content-text {
                                p {
                                    color: var(--Base-Dark, #171717);
                                    font-size: 16px;
                                    font-weight: 400;
                                    line-height: 140%;
                                    letter-spacing: 0.16px;
                                    margin-bottom:10px;

                                    &:last-child {
                                        margin-bottom:0;
                                    }
                                }
                            }
                        }
                        .club__content-features {
                            display:flex;
                            justify-content:space-between;
                            align-items:stretch;
                            gap:32px;

                            .feature__block {
                                flex:1 0 calc(calc(100% / 2) - 65px);

                                .feature__block-icon {
                                    margin-bottom:12px;

                                    img {
                                        width:28px;
                                    }
                                }
                                .feature__block-title {
                                    color: var(--Base-Dark, #171717);
                                    font-size: 20px;
                                    font-weight: 400;
                                    line-height: 150%;
                                    letter-spacing: 0.2px;
                                    margin-bottom:8px;
                                }
                                .feature__block-text {
                                    color: var(--Gray-7, #7A7A85);
                                    font-size: 16px;
                                    line-height: 140%;
                                    letter-spacing: 0.16px;
                                }
                            }
                            .feature__block-del {
                                height:100%;
                                width:1px;
                                background: var(--Gray-3, #E5E5E6);

                                &:last-child {
                                    display:none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .steps__section {
        .club__block {
            .club__steps {
                display: grid;
                grid-template-columns: repeat(4, 1fr);

                .club__step {
                    padding-right:50px;
                    box-sizing:border-box;

                    .club__step-count {
                        color: var(--Dark-wine-1, #92111C);
                        font-size: 32px;
                        font-weight: 500;
                        line-height: 140%;
                        letter-spacing: 0.64px;
                        margin-bottom:16px;
                    }
                    .club__step-title {
                        color: var(--Base-Dark, #171717);
                        font-size: 26px;
                        font-weight: 600;
                        line-height: 130%;
                        letter-spacing: 0.52px;
                        margin-bottom:8px;
                    }
                    .club__step-text {
                        color: var(--Base-Dark, #171717);
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 140%;
                        letter-spacing: 0.16px;
                    }
                }
            }
        }
    }

    .benefits__section {
        .benefits__block {
            .benefits__block-note {
                color: var(--Gray-7, #7A7A85);
                font-size: 14px;
                font-weight: 400;
                line-height: 140%;
                letter-spacing: 0.14px;
                margin-top:16px;
                max-width:570px;
                padding-left:20px;
                position:relative;

                &:after {
                    content:"";
                    position:absolute;
                    top:0;
                    left:0;
                    display:block;
                    width:16px;
                    height:18px;
                    background:url("../../icons/snowflake.svg") center center no-repeat;
                }
            }
            .benefits__block-items {
                display:flex;
                gap:20px;
                align-items:stretch;

                .benefit__item {

                    .benefit__item-card {
                        flex:1 0 calc(calc(100% / 4) - 20px);
                        padding:24px 16px;
                        box-sizing:border-box;
                        background:#FAFAFA;
                        border-radius: 12px;


                        .card__item {
                            background: var(--card-bg);
                            min-height:165px;
                            border-radius: 8px;
                            padding:30px 25px 17px 25px;
                            display:flex;
                            flex-direction: column;
                            justify-content:space-between;
                            align-items:center;
                            height:100%;
                            border: 1px solid var(--Gray-2, #F2F2F2);
                            margin-bottom:24px;

                            .card__item-discount {
                                color: var(--Gray-8---Main, #383838);
                                text-align: center;
                                font-size: 9px;
                                font-weight: 400;
                                line-height: 160%;
                                letter-spacing: 0.162px;
                                text-transform: uppercase;
                            }
                            .card__item-logo {
                                .card__item-logo--title {
                                    color: var(--Base-Dark, #171717);
                                    text-align: center;
                                    font-size: 10.824px;
                                    font-weight: 400;
                                    line-height: 120%;
                                    letter-spacing: 0.108px;
                                    text-transform: uppercase;
                                    margin-top:5px;
                                }
                            }
                            .card__item-status {
                                display:flex;
                                align-items:center;
                                justify-content:space-between;
                                width:100%;

                                .card__item-status--title {
                                    color: var(--Gray-8---Main, #383838);
                                    text-align: center;
                                    font-size: 8.188px;
                                    font-weight: 400;
                                    line-height: 160%;
                                    letter-spacing: 0.162px;
                                    text-transform: uppercase;
                                }
                                .card__item-status--value {
                                    color: var(--Base-Dark, #171717);
                                    text-align: center;
                                    font-size: 13.529px;
                                    line-height: 160%;
                                    letter-spacing: 0.271px;
                                    text-transform: uppercase;
                                }
                            }
                        }
                        &.benefit__item-card--light {
                            .card__item {
                                .card__item-discount {
                                    color: var(--Gray-2, #F2F2F2);
                                }
                                .card__item-logo {
                                    .card__item-logo--title {
                                        color: var(--Gray-2, #F2F2F2);
                                    }
                                }
                                .card__item-status {
                                    .card__item-status--title {
                                        color: var(--Gray-2, #F2F2F2);
                                    }
                                    .card__item-status--value {
                                        color: var(--Gray-2, #F2F2F2);
                                    }
                                }
                            }
                        }
                    }
                    .benefit__item-services {
                        .benefit__item-service {
                            color: var(--Gray-6, #9A9AA2);
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 140%;
                            letter-spacing: 0.14px;
                            margin-bottom:12px;
                            padding-left:25px;
                            position:relative;

                            &:last-child {
                                 margin-bottom:0;
                            }
                            &:after {
                                content:"";
                                display:block;
                                width:16px;
                                height:16px;
                                background: url("../../icons/close-small.svg") center center no-repeat;
                                background-size:100%;
                                position:absolute;
                                top:3px;
                                left:0;
                            }
                            &.benefit__item-service--active {
                                 color: var(--Base-Dark, #171717);

                                &:after {
                                     background: url("../../icons/check-small.svg") center center no-repeat;
                                }
                            }
                        }

                    }
                }
            }
        }
    }

    .become__section {
        margin-top:136px;

        .become__banner-block {
            .become__banner {
                position:relative;
                height:542px;
                border-radius:12px;
                overflow:hidden;

                &:after {
                    content:"";
                    position:absolute;
                    top:0;
                    left:0;
                    width:100%;
                    height:100%;
                    display:block;
                    background:url("../../images/shadow_banner.png") center top no-repeat;
                    z-index:9;

                }

                & > img {
                    position:absolute;
                    width:100%;
                    height:100%;
                    object-fit: cover;
                    top:0;
                    left:0;
                    border-radius:12px;
                }

                .become__banner-content {
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    flex-direction: column;
                    height:100%;
                    position:relative;
                    z-index:20;

                    .become__banner-title {
                        color: var(--Gray-4, #D1D1D2);
                        font-size: 14px;
                        line-height: 160%;
                        letter-spacing: 0.28px;
                        text-transform: uppercase;
                    }
                    .become__banner-info {
                        margin-top:40px;
                        margin-bottom:56px;
                        max-width:408px;

                        .become__banner-info--logo {
                            text-align:center;
                            margin-bottom:28px;

                            img {
                                max-width:100%;
                            }
                        }
                        .become__banner-info--subtitle {
                            color: var(--Base-White, #FFF);
                            text-align: center;
                            font-size: 26px;
                            font-weight: 300;
                            line-height: 140%;
                            letter-spacing: 0.52px;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            gap:20px;

                            &:after, &:before {
                                height:1px;
                                content:"";
                                display:block;
                                background: var(--Gray-1, #FAFAFA);
                                width:125px;
                            }
                        }
                        .become__banner-info--text {
                            color: var(--Base-White, #FFF);
                            text-align: center;
                            font-size: 14px;
                            line-height: 140%;
                            letter-spacing: 0.14px;
                            margin-top:40px;
                        }
                    }
                    .become__banner-button {

                    }
                }
            }
        }
    }

    .brand__section {
        .brand__block {
            .brand__block-head {
                display:flex;
                align-items:center;
                justify-content: space-between;
                gap:20px;

                .brand__head-url {
                    a {
                        color: var(--Base-Dark, #171717);
                        font-size: 20px;
                        line-height: 150%;
                        letter-spacing: 0.2px;
                    }
                }
            }
            .brands__items-block {
                display:flex;
                justify-content:space-between;
                flex-wrap:wrap;
                gap:20px;

                .brands__item-card {
                    flex: 1 0 calc(calc(100% / 6) - 20px);
                    position:relative;

                    a {
                        position:absolute;
                        top:0;
                        left:0;
                        width:100%;
                        height:100%;
                        display:block;
                        z-index:9;
                    }

                    .brand__card-image {
                        width:100%;
                        overflow:hidden;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                        flex-direction:column;
                        height:100px;

                        img {
                            max-width:100%;
                        }
                    }
                }
            }
        }
    }

    .brand__section-loyalty {
        position:relative;

        .brand__loyalty-block {
            height:445px;
            position:relative;
            border-radius: 24px;
            overflow:hidden;
            padding: 40px;
            box-sizing:border-box;

            .brand__loyalty-image {
                height:100%;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%, -50%);
                border-radius: 24px;
                max-width:none;
            }
        }
        .brand__loyalty-content {
            position:relative;
            z-index:9;
            max-width:372px;
            height:100%;
            display:flex;
            justify-content:center;
            flex-direction:column;

            .brand__loyalty-content--title {
                color: var(--Base-White, #FFF);
                font-size: 26px;
                font-weight: 600;
                line-height: 130%;
                letter-spacing: 0.52px;
                margin-bottom:16px;
            }
            .brand__loyalty-content--text {
                color: var(--Base-White, #FFF);
                font-size: 16px;
                line-height: 140%;
                letter-spacing: 0.16px;
            }
            .brand__loyalty-content--button {
                margin-top:32px;

                .button {
                    font-size: 12px;
                    line-height: 100%;
                    letter-spacing: 0.24px;
                    min-height: 36px;
                }
            }
        }
    }

}

@media (max-width: 992px) {
    .referal__page {
        .title__block {
            font-size: 28px;
            line-height: 140%;
            letter-spacing: 0.56px;
            margin-bottom:24px;
        }
    }
    .wrap__section {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .main.referal__page {
        padding-top:30px;

        .banner__section {


            .banner__block {
                padding:80px 16px 40px 16px;
                height:670px;
                max-width:358px;
                margin:0 auto;

                .banner__content {
                    max-width:100%;
                    justify-content: start;

                    .banner__content-title {
                        font-size: 29px;
                        line-height: 130%;
                        letter-spacing: 0.6px;
                        margin-bottom:16px;
                    }
                    .banner__content-text {
                        font-size: 14px;
                        line-height: 140%;
                        letter-spacing: 0.14px;
                    }
                    .banner__buttons {
                        flex-direction: column;
                        gap:16px;
                        margin-top:40px;

                        .button {
                            width:100%;
                            min-height:48px;
                        }
                    }
                }
            }
        }
        .club__section {
            .club__block {
                .club__block-info {
                    flex-direction: column-reverse;
                    gap:32px;

                    .club__block-image {
                        flex:none;
                        min-height:404px;

                        .club__subscriptions-block {
                            max-width:310px;
                        }
                    }

                    .club__block-content {
                        flex:none;
                        padding:0;
                        .club__content-top {
                            margin-bottom:40px;

                            .club__content-title {
                                font-size: 28px;
                                line-height: 140%;
                                letter-spacing: 0.56px;
                            }
                            .club__content-text {
                                p {
                                    font-size: 14px;
                                    line-height: 140%;
                                    letter-spacing: 0.14px;
                                    margin-bottom:8px;
                                }
                            }
                        }
                        .club__content-features {
                            flex-direction:column;
                            gap:24px;

                            .feature__block {
                                .feature__block-icon {
                                    margin-bottom:16px;
                                }
                            }

                            .feature__block-del {
                                width:100%;
                                height:1px;
                            }
                        }
                    }
                }
            }
        }
        .steps__section {
            .club__block {
                .club__steps {
                    grid-template-columns: repeat(1, 1fr);
                    .club__step {
                        padding-right:0;
                        padding-bottom:20px;
                        border-bottom:1px solid var(--Gray-3, #E5E5E6);
                        margin-bottom:20px;

                        &:last-child {
                            margin-bottom:0;
                        }

                        .club__step-count {
                            font-size: 26px;
                            font-weight: 600;
                            line-height: 130%;
                            letter-spacing: 0.52px;
                            margin-bottom:8px;
                        }
                        .club__step-title {
                            font-size: 20px;
                            font-weight: 400;
                            line-height: 150%;
                            letter-spacing: 0.2px;
                        }
                        .club__step-text {
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 140%;
                            letter-spacing: 0.14px;
                        }
                    }
                }
            }
        }
        .benefits__section {
            .benefits__block {
                .benefits__block-items {
                    flex-direction:column;

                    .benefit__item {
                        .benefit__item-card {
                            padding:24px 16px;

                            .card__item {
                                min-height:196px;

                                .card__item-logo {
                                    .card__item-logo--img {
                                        img {
                                            width:165px;
                                        }
                                    }
                                    .card__item-logo--title {
                                        font-size: 12.784px;
                                        line-height: 120%;
                                        letter-spacing: 0.128px;
                                        text-transform: uppercase;
                                    }
                                }
                                .card__item-status {
                                    .card__item-status--title {
                                        text-align: center;
                                        font-size: 9.588px;
                                        line-height: 160%;
                                        letter-spacing: 0.192px;
                                    }
                                    .card__item-status--value {
                                        font-size: 15.98px;
                                        line-height: 160%;
                                        letter-spacing: 0.32px;
                                        text-transform: uppercase;
                                    }
                                }
                            }
                            .benefit__item-services {
                                .benefit__item-service {
                                    display:none;

                                    &.benefit__item-service--active {
                                         display:block;
                                     }
                                }
                            }
                        }
                    }
                }
            }
        }
        .become__section {
            margin-top:90px;
            margin-bottom:90px;

            .become__banner-block {

                .become__banner {
                    padding-left:28px;
                    padding-right:28px;
                    .become__banner-content {
                        .become__banner-info {
                            margin-top:24px;
                            margin-bottom:32px;
                            max-width:100%;

                            .become__banner-info--text {
                                margin-top:32px;
                            }
                            .become__banner-info--subtitle {
                                text-align: center;
                                font-size: 22px;
                                font-weight: 300;
                                line-height: 140%;
                                letter-spacing: 0.44px;
                                gap:0;

                                span {
                                    flex: 1 0 99px;
                                }

                                &:after, &:before {
                                    width: auto;
                                    flex: 1 1 84px;
                                }
                            }
                        }
                        .become__banner-button {
                            width:100%;
                            .button {
                                width:100%;
                                font-size: 12px;
                                line-height: 100%;
                                letter-spacing: 0.24px;
                                min-height:48px;
                            }
                        }
                    }
                    &:after {
                         background: url("../../images/shadow_banner.png") right center no-repeat;
                    }
                }
            }
        }

        .brand__section {
            margin-bottom:30px;

            .brand__block {
                .brand__block-head {
                    margin-bottom:32px;

                    .brand__head-title {
                        max-width:50%;
                        margin-bottom:0;
                    }
                    .brand__head-url {
                        font-size: 16px;
                        line-height: 150%;
                        letter-spacing: 0.16px;
                    }
                }
                .brands__items-block {
                    gap:12px;
                    margin-left:-16px;
                    margin-right:-16px;
                    padding-left:16px;
                    flex-wrap:nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;

                    .brands__item-card {
                        flex:none;
                        width:140px;
                        .brand__card-image {
                            height:80px;
                        }
                    }
                }
            }
        }

        .brand__section-loyalty {
            margin-top:30px;
            .brand__loyalty-block {
                max-width:358px;
                padding:40px 24px;
                margin:0 auto;
                .brand__loyalty-content {
                    justify-content: start;

                    .brand__loyalty-content--title {
                        font-size: 22px;
                        line-height: 150%;
                        letter-spacing: 0.22px;
                        margin-bottom:16px;
                    }
                    .brand__loyalty-content--text {
                        font-size: 16px;
                        line-height: 140%;
                        letter-spacing: 0.16px;
                    }
                    .brand__loyalty-content--button {
                        width:100%;
                        margin-top:32px;

                        .button {
                            width:100%;
                            min-height:48px;
                            text-align: center;
                            font-size: 12px;
                            font-weight: 500;
                            line-height: 100%;
                            letter-spacing: 0.24px;
                        }
                    }
                }
            }
        }
    }
}