.main-services .rectangle-block {
    background: rgba(255, 249, 249, 0.10);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: none;
    box-shadow: none;
    border-radius: 20px;
    height: 134px;
    padding: 20px;
    width: 340px;
    margin: 14px 10px 10px;

    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    align-content: start;
}
.main-services .main-advantages__icon {
    grid-row: 1 / 3;
    height: 60px;
    width: 60px;
}
.main-services .rectangle-block h3 {
    align-self: end;
    font-size: 18px;
    font-family: Manrope;
}
.main-services .rectangle-block .title {
    margin: 0;
    text-align: left;
	font-weight: 100;
}
.main-services .rectangle-block:hover{
    -webkit-box-shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.1);
}
.main-services .main-advantages__icon {
    margin-bottom: 16px;
}
.main-services .main-advantages__icon img {
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 80px;
}
/* Общие правила блока услуг для всех разрешений */
.main-services .rectangle-block {
    text-align: left;
}

.main-services .rectangle-block h3,
.main-services .rectangle-block .title,
.main-services .rectangle-block .rectangle-block__services__text {
    text-align: left !important;
}


/* =========================================================
   КОМПАКТНЫЙ DESKTOP: 1024–1278 px
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1278px) {
    .main-services {
        box-sizing: border-box;
        padding: 0;/*56px 0;*/
        /*background: #0e0c20;*/
    }

    .main-services > .inner-width {
        width: auto;
        max-width: none;
        margin-right: clamp(42px, 6vw, 76px);
        margin-left: clamp(42px, 6vw, 76px);
    }

    .main-services .page-section__title {
        display: block;
        float: none;
        position: static;
        width: 100%;
        max-width: none;
        margin: 0 auto 36px;
        padding: 0;
        transform: none;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(36px, 3.6vw, 46px);
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }

    .main-services .center {
        width: 100%;
        text-align: initial;
    }

    .main-services .row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin: 0;
    }

    .main-services .row > [class*='col-'] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .main-services .rectangle-block {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 18px;
        align-content: start;
        width: 100%;
        height: 100%;
        min-height: 170px;
        margin: 0;
        padding: 24px 20px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 22px;
        color: #fff;
        background: rgba(255, 255, 255, .09);
        box-shadow:
            0 7px 18px rgba(4, 3, 14, .24),
            inset 1px 1px 6px rgba(255, 255, 255, .07);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

    .main-services .main-advantages__icon {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 54px;
        height: 54px;
        margin: 0;
    }

    .main-services .main-advantages__icon img {
        display: block;
        width: 54px;
        height: 54px;
        max-height: none;
        object-fit: contain;
    }

    .main-services .rectangle-block h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 14px;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
        color: #fff;
    }

    .main-services .rectangle-block .title,
    .main-services .rectangle-block__services__text {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
        text-align: left;
        color: rgba(255, 255, 255, .88);
    }
}


/* =========================================================
   ПЛАНШЕТ: 768–1023 px
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-services {
        box-sizing: border-box;
        padding: 46px 0;
        /*background: #0e0c20;*/
    }

    .main-services > .inner-width {
        width: auto;
        max-width: none;
        margin-right: clamp(28px, 4.5vw, 44px);
        margin-left: clamp(28px, 4.5vw, 44px);
    }

    .main-services .page-section__title {
        display: block;
        float: none;
        position: static;
        width: 100%;
        max-width: none;
        margin: 0 auto 30px;
        padding: 0;
        transform: none;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(32px, 4.4vw, 40px);
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }

    .main-services .center {
        width: 100%;
        text-align: initial;
    }

    .main-services .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin: 0;
    }

    .main-services .row > [class*='col-'] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .main-services .rectangle-block {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 18px;
        align-content: start;
        width: 100%;
        height: 100%;
        min-height: 145px;
        margin: 0;
        padding: 22px 18px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 20px;
        color: #fff;
        background: rgba(255, 255, 255, .09);
        box-shadow:
            0 7px 18px rgba(4, 3, 14, .24),
            inset 1px 1px 6px rgba(255, 255, 255, .07);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

    .main-services .main-advantages__icon {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 50px;
        height: 50px;
        margin: 0;
    }

    .main-services .main-advantages__icon img {
        display: block;
        width: 50px;
        height: 50px;
        max-height: none;
        object-fit: contain;
    }

    .main-services .rectangle-block h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 13px;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
        color: #fff;
    }

    .main-services .rectangle-block .title,
    .main-services .rectangle-block__services__text {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.4;
        text-align: left;
        color: rgba(255, 255, 255, .88);
    }
}

/*
 * Мобильный адаптив только для блока «Наши услуги» на главной странице.
 * Промо-блок, шапку и остальные секции этот файл не изменяет.
 */

@media (max-width: 767px) {
    .main-services {
        box-sizing: border-box;
        margin: 0;
        padding: 28px 0 24px;
        /*background: #0e0c20;*/
    }

    .main-services > .inner-width {
        width: auto;
        max-width: none;
        margin-right: 10px;
        margin-left: 10px;
    }

    .main-services .page-section__title.center {
        display: block;
        width: 100%;
        margin: 0 0 22px;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.3px;
        text-align: center;
        color: #fff;
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: #fff;
    }

    /* Только контейнер карточек, но не заголовок */
    .main-services > .inner-width > div.center {
        width: 100%;
        text-align: left;
    }

    .main-services .row {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 16px;
        margin: 0;
    }

    .main-services .row > [class*='col-'] {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .main-services .rectangle-block {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 30px;
        align-content: start;
        width: 100%;
        height: auto;
        min-height: 174px;
        margin: 0;
        padding: 20px 20px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 20px;
        color: #fff;
        background: rgba(255, 255, 255, .09);
        box-shadow:
            0 7px 18px rgba(4, 3, 14, .24),
            inset 1px 1px 6px rgba(255, 255, 255, .07);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

    /*.main-services .rectangle-block:hover {
        box-shadow:
            0 7px 18px rgba(4, 3, 14, .24),
            inset 1px 1px 6px rgba(255, 255, 255, .07);
    }*/

    .main-services .main-advantages__icon {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    .main-services .main-advantages__icon img {
        display: block;
        width: 60px;
        height: 60px;
        max-height: none;
        object-fit: contain;
    }

    .main-services .rectangle-block h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        margin: 1px 0 17px;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 0;
        text-align: left;
        color: #fff;
    }

    .main-services .rectangle-block .title,
    .main-services .rectangle-block__services__text {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        margin: 0px 0px 0px 0px;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.32;
        text-align: left;
        color: rgba(255, 255, 255, .90);
    }
}

@media (max-width: 374px) {
    .main-services > .inner-width {
        margin-right: 8px;
        margin-left: 8px;
    }

    .main-services .page-section__title {
        font-size: 24px;
    }

    .main-services .row {
        gap: 14px;
    }

    .main-services .rectangle-block {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 16px;
        min-height: 168px;
        padding: 20px 15px;
        border-radius: 18px;
    }

    .main-services .main-advantages__icon,
    .main-services .main-advantages__icon img {
        width: 44px;
        height: 44px;
    }

    .main-services .rectangle-block h3 {
        margin-bottom: 14px;
        font-size: 16px;
    }

    .main-services .rectangle-block .title,
    .main-services .rectangle-block__services__text {
        font-size: 12.5px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .main-services .rectangle-block {
        transition:
            background-color .25s ease,
            border-color .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
    }

    .main-services .rectangle-block:hover {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .42);

        box-shadow:
            0 10px 32px rgba(255, 255, 255, .10),
            0 0 22px rgba(255, 255, 255, .10),
            inset 1px 1px 8px rgba(255, 255, 255, .12);

        transform: translateY(-3px);
    }
}

/* =========================================================
   БОЛЬШОЙ DESKTOP: от 1921 px
   Масштаб относительно версии 1440 px ≈ 1.84
   Контрольная ширина контента — 2103 px
   ========================================================= */
/* =========================================================
   ПРОМЕЖУТОЧНЫЙ DESKTOP: 1400–1920 px
   ========================================================= */
@media (min-width: 1400px) /*and (max-width: 1920px)*/ {
    .main-services {
        margin-top: clamp(80px, calc(17.008px + 4.374vw), 100.997px);
        margin-bottom: clamp(80px, calc(17.008px + 4.374vw), 100.997px);
    }

    .main-services > .inner-width {
        max-width: clamp(1143px, calc(243px + 62.5vw), 1443px);
    }

    /*
     * На 1440 исходная карточка визуально занимала почти всю треть строки.
     * Поэтому расширение контейнера отдаём карточкам, а не большим пустым gap.
     */
    .main-services .row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(24px, calc(1.701px + 0.437vw), 10.1px);
        row-gap: clamp(24px, calc(5.102px + 1.312vw), 30.299px);
        margin: 0;
    }

    .main-services .row > [class*='col-'] {
        display: flex;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .main-services .rectangle-block {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: clamp(60px, calc(12.756px + 3.281vw), 75.748px) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: clamp(20px, calc(4.252px + 1.094vw), 25.249px);
        align-content: start;

        width: 100%;
        height: 100%;
        min-height: clamp(174px, calc(36.992px + 9.514vw), 219.669px);
        margin: 0;
        padding: clamp(20px, calc(4.252px + 1.094vw), 25.249px);

        border-radius: clamp(20px, calc(4.252px + 1.094vw), 25.249px);
    }

    .main-services .main-advantages__icon,
    .main-services .main-advantages__icon img {
        width: clamp(60px, calc(12.756px + 3.281vw), 75.748px);
        height: clamp(60px, calc(12.756px + 3.281vw), 75.748px);
        max-height: none;
    }

    .main-services .rectangle-block h3 {
        margin: 0 0 clamp(10px, calc(2.126px + 0.547vw), 12.625px);
        font-size: clamp(18px, calc(3.827px + 0.984vw), 22.724px);
        line-height: 1.3;
    }

    .main-services .rectangle-block .title,
    .main-services .rectangle-block__services__text {
        font-size: clamp(16px, calc(3.402px + 0.875vw), 20.199px);
        line-height: 1.32;
    }
}

@media (min-width: 1921px) and (min-device-width: 2200px) {

    /*
     * Плавное продолжение desktop-масштабирования:
     *
     * 1920 px  -> сохраняем размеры предыдущего режима;
     * 1921–2650 px -> плавно увеличиваем блок;
     * 2650+    -> clamp() удерживает размеры большого макета.
     *
     * Это убирает резкий скачок при пересечении 1920/1921 px,
     * но сохраняет крупный вид секции на больших мониторах.
     */


    /* ---------- Секция ---------- */

    .main-services {
        margin-top: clamp(
            100.997px,
            calc(-19.997192px + 6.301781vw),
            147px
        );

        margin-bottom: clamp(
            100.997px,
            calc(-19.997192px + 6.301781vw),
            147px
        );
    }


    .main-services > .inner-width {
        width: 100%;

        max-width: clamp(
            1443px,
            calc(-292.890411px + 90.410959vw),
            2103px
        );

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


    /* ---------- Заголовок ---------- */

    .main-services .page-section__title {
        display: block;

        width: 100%;
        max-width: none;

        margin:
            0
            auto
            clamp(
                37.874px,
                calc(-7.169726px + 2.346027vw),
                55px
            );

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;

        font-size: clamp(
            50.499px,
            calc(-11.311849px + 3.219315vw),
            74px
        );

        font-weight: 700;

        /*
         * До 1921 px у общего .page-section__title line-height = 45px.
         * На большом макете он должен прийти к 74px.
         */
        line-height: clamp(
            45px,
            calc(-31.273973px + 3.972603vw),
            74px
        );

        text-align: center;

        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }


    /* ---------- Контейнер карточек ---------- */

    .main-services .center {
        width: 100%;
        text-align: initial;
    }


    .main-services .row {
        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        column-gap: clamp(
            10.1px,
            calc(-260.584932px + 14.095890vw),
            113px
        );

        row-gap: clamp(
            30.299px,
            calc(-5.737986px + 1.876918vw),
            44px
        );

        margin: 0;
    }


    /*
     * Убираем bootstrap-ширины и padding колонок:
     * геометрией полностью управляет grid.
     */
    .main-services .row > [class*='col-'] {
        display: flex;

        width: auto;
        max-width: none;

        padding: 0;
    }


    /* ---------- Карточка ---------- */

    .main-services .rectangle-block {
        box-sizing: border-box;

        display: grid;

        grid-template-columns:
            clamp(
                75.748px,
                calc(-14.339123px + 4.692055vw),
                110px
            )
            minmax(0, 1fr);

        /*
         * На предыдущем desktop-режиме строки явно заданы.
         * Сохраняем ту же структуру и после 1920 px.
         */
        grid-template-rows: auto 1fr;

        column-gap: clamp(
            25.249px,
            calc(-5.657740px + 1.609726vw),
            37px
        );

        align-content: start;

        width: 100%;

        min-height: clamp(
            219.669px,
            calc(47.782123px + 8.952192vw),
            285px
        );

        height: 100%;

        margin: 0;

        padding: clamp(
            25.249px,
            calc(-5.657740px + 1.609726vw),
            37px
        );

        border: none;

        border-radius: clamp(
            25.249px,
            calc(-5.657740px + 1.609726vw),
            37px
        );

        color: #fff;

        background: rgba(255, 249, 249, 0.10);

        box-shadow: none;

        /*
         * В базовом desktop до 1920 px blur = 3px,
         * в большом макете = 6px.
         */
        -webkit-backdrop-filter: blur(
            clamp(
                3px,
                calc(-4.890411px + 0.410959vw),
                6px
            )
        );

        backdrop-filter: blur(
            clamp(
                3px,
                calc(-4.890411px + 0.410959vw),
                6px
            )
        );
    }


    /* ---------- Иконка ---------- */

    .main-services .main-advantages__icon {
        grid-row: 1 / 3;

        width: clamp(
            75.748px,
            calc(-14.339123px + 4.692055vw),
            110px
        );

        height: clamp(
            75.748px,
            calc(-14.339123px + 4.692055vw),
            110px
        );

        margin: 0;
    }


    .main-services .main-advantages__icon img {
        display: block;

        width: clamp(
            75.748px,
            calc(-14.339123px + 4.692055vw),
            110px
        );

        height: clamp(
            75.748px,
            calc(-14.339123px + 4.692055vw),
            110px
        );

        max-height: none;

        object-fit: contain;
    }


    /* ---------- Название услуги ---------- */

    .main-services .rectangle-block h3 {
        align-self: end;

        margin:
            0
            0
            clamp(
                12.625px,
                calc(-1.511986px + 0.736301vw),
                18px
            );

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;

        font-size: clamp(
            22.724px,
            calc(-4.302849px + 1.407671vw),
            33px
        );

        font-weight: 700;
        line-height: 1.3;

        text-align: left;

        color: #fff;
    }


    /* ---------- Описание ---------- */

    .main-services .rectangle-block .title,
    .main-services .rectangle-block__services__text {
        margin: 0;

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;

        font-size: clamp(
            20.199px,
            calc(-2.948836px + 1.205616vw),
            29px
        );

        font-weight: 400;
        line-height: 1.32;

        text-align: left;

        color: rgba(255, 255, 255, 0.90);
    }


    /* ---------- Hover ---------- */

    /*
     * До 1920 px hover поднимает карточку на 3px.
     * К 2650 px плавно доходим до 6px.
     */
    .main-services .rectangle-block:hover {
        transform: translateY(
            clamp(
                -6px,
                calc(4.890411px - 0.410959vw),
                -3px
            )
        );
    }
}

/* =========================================================
   MAIN SERVICES — ВАРИАНТ 4 КАРТОЧКИ
   CARD_COLUMNS = 4

   Вариант services-grid--3 не трогаем вообще.
   ========================================================= */


/* ---------------------------------------------------------
   Сетка 4 карточек
   --------------------------------------------------------- */

.main-services .row.services-grid--4 {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    column-gap: 20px;
    row-gap: 24px;

    margin: 0;
}


/*
 * Для варианта 4 Bootstrap больше не управляет
 * шириной элементов. Но сами классы col-* оставляем
 * в HTML для совместимости.
 */
.main-services .services-grid--4 > [class*="col-"] {
    display: flex;

    width: auto;
    max-width: none;

    padding: 0;
}


/* ---------------------------------------------------------
   Карточка — вертикальная компоновка
   --------------------------------------------------------- */

.main-services .services-grid--4 .rectangle-block {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;
    height: 100%;
    min-height: 330px;

    margin: 0;
    padding: 28px 24px;

    border-radius: 22px;
}


/* ---------------------------------------------------------
   Иконка
   --------------------------------------------------------- */

.main-services .services-grid--4 .main-advantages__icon {
    flex: 0 0 auto;

    width: 56px;
    height: 56px;

    margin: 0 0 18px;

    /* старые grid-настройки больше не нужны */
    grid-column: auto;
    grid-row: auto;
}


.main-services .services-grid--4 .main-advantages__icon img {
    display: block;

    width: 56px;
    height: 56px;

    max-height: none;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Название
   --------------------------------------------------------- */

.main-services .services-grid--4 .rectangle-block h3 {
    width: 100%;

    /* важно: базово у h3 стоит align-self: end */
    align-self: flex-start;

    margin: 0 0 18px;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;

    text-align: left;

    grid-column: auto;
    grid-row: auto;
}


/* ---------------------------------------------------------
   Описание — теперь на всю ширину карточки
   --------------------------------------------------------- */

.main-services .services-grid--4 .rectangle-block .title,
.main-services .services-grid--4 .rectangle-block__services__text {
    width: 100%;

    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;

    text-align: left !important;

    color: rgba(255, 255, 255, .90);

    grid-column: auto;
    grid-row: auto;
}


/* =========================================================
   COMPACT DESKTOP
   1024–1278

   4 карточки → 2 × 2
   Внутри карточки возвращаем компоновку варианта 3:
   иконка слева, текст справа.
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1278px) {

    .main-services .row.services-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }


    .main-services .services-grid--4 .rectangle-block {
        box-sizing: border-box;

        display: grid;

        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: auto 1fr;

        column-gap: 18px;

        align-content: start;
        align-items: initial;
        justify-content: initial;

        width: 100%;
        height: 100%;
        min-height: 170px;

        margin: 0;
        padding: 24px 20px;
    }


    .main-services .services-grid--4 .main-advantages__icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 54px;
        height: 54px;

        margin: 0;
    }


    .main-services .services-grid--4 .main-advantages__icon img {
        display: block;

        width: 54px;
        height: 54px;

        max-height: none;

        object-fit: contain;
    }


    .main-services .services-grid--4 .rectangle-block h3 {
        grid-column: 2;
        grid-row: 1;

        align-self: initial;

        width: auto;

        margin: 0 0 14px;

        font-size: 17px;
        line-height: 1.3;
    }


    .main-services .services-grid--4 .rectangle-block .title,
    .main-services .services-grid--4 .rectangle-block__services__text {
        grid-column: 2;
        grid-row: 2;

        width: auto;

        margin: 0;

        font-size: 14px;
        line-height: 1.4;
    }
}


/* =========================================================
   TABLET
   768–1023

   4 карточки → 2 × 2
   Внутри — обычная адаптивная карточка.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .main-services .row.services-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }


    .main-services .services-grid--4 .rectangle-block {
        box-sizing: border-box;

        display: grid;

        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-rows: auto 1fr;

        column-gap: 18px;

        align-content: start;
        align-items: initial;
        justify-content: initial;

        width: 100%;
        height: 100%;
        min-height: 145px;

        margin: 0;
        padding: 22px 18px;
    }


    .main-services .services-grid--4 .main-advantages__icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 50px;
        height: 50px;

        margin: 0;
    }


    .main-services .services-grid--4 .main-advantages__icon img {
        display: block;

        width: 50px;
        height: 50px;

        max-height: none;

        object-fit: contain;
    }


    .main-services .services-grid--4 .rectangle-block h3 {
        grid-column: 2;
        grid-row: 1;

        align-self: initial;

        width: auto;

        margin: 0 0 13px;

        font-size: 16px;
        line-height: 1.3;
    }


    .main-services .services-grid--4 .rectangle-block .title,
    .main-services .services-grid--4 .rectangle-block__services__text {
        grid-column: 2;
        grid-row: 2;

        width: auto;

        margin: 0;

        font-size: 13.5px;
        line-height: 1.4;
    }
}


/* =========================================================
   MOBILE
   до 767

   4 карточки → одна под другой.
   Внутренняя компоновка такая же, как у варианта 3.
   ========================================================= */

@media (max-width: 767px) {

    .main-services .row.services-grid--4 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        gap: 16px;

        margin: 0;
    }


    .main-services .services-grid--4 > [class*="col-"] {
        flex: 0 0 auto;

        width: 100%;
        max-width: none;

        padding: 0;
    }


    .main-services .services-grid--4 .rectangle-block {
        box-sizing: border-box;

        display: grid;

        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto 1fr;

        column-gap: 30px;

        align-content: start;
        align-items: initial;
        justify-content: initial;

        width: 100%;
        height: auto;
        min-height: 174px;

        margin: 0;
        padding: 20px;
    }


    .main-services .services-grid--4 .main-advantages__icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 60px;
        height: 60px;

        margin: 0;
    }


    .main-services .services-grid--4 .main-advantages__icon img {
        display: block;

        width: 60px;
        height: 60px;

        max-height: none;

        object-fit: contain;
    }


    .main-services .services-grid--4 .rectangle-block h3 {
        grid-column: 2;
        grid-row: 1;

        align-self: start;

        width: auto;
        min-width: 0;

        margin: 1px 0 17px;

        font-size: 18px;
        line-height: 1.25;
    }


    .main-services .services-grid--4 .rectangle-block .title,
    .main-services .services-grid--4 .rectangle-block__services__text {
        grid-column: 2;
        grid-row: 2;

        width: auto;
        min-width: 0;

        margin: 0;

        font-size: 16px;
        line-height: 1.32;
    }
}

@media (max-width: 374px) {

    .main-services .services-grid--4 .rectangle-block {
        grid-template-columns: 44px minmax(0, 1fr);

        column-gap: 16px;

        min-height: 168px;

        padding: 20px 15px;

        border-radius: 18px;
    }


    .main-services .services-grid--4 .main-advantages__icon,
    .main-services .services-grid--4 .main-advantages__icon img {
        width: 44px;
        height: 44px;
    }


    .main-services .services-grid--4 .rectangle-block h3 {
        margin-bottom: 14px;

        font-size: 16px;
    }


    .main-services .services-grid--4 .rectangle-block .title,
    .main-services .services-grid--4 .rectangle-block__services__text {
        font-size: 12.5px;
    }
}


/* =========================================================
   БОЛЬШОЙ DESKTOP
   1400–1920
   ========================================================= */

@media (min-width: 1400px) and (max-width: 1920px) {

    .main-services .row.services-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        column-gap: clamp(20px, 1.4vw, 27px);
        row-gap: clamp(24px, 1.6vw, 31px);
    }


    .main-services .services-grid--4 .rectangle-block {
        min-height:
            clamp(
                340px,
                22vw,
                410px
            );

        padding:
            clamp(
                28px,
                1.8vw,
                35px
            );
    }


    .main-services .services-grid--4 .main-advantages__icon {
        width:
            clamp(
                56px,
                3.5vw,
                67px
            );

        height:
            clamp(
                56px,
                3.5vw,
                67px
            );
    }


    .main-services .services-grid--4 .main-advantages__icon img {
        width: 100%;
        height: 100%;
    }


    .main-services .services-grid--4 .rectangle-block h3 {
        margin-bottom:
            clamp(
                16px,
                1vw,
                20px
            );

        font-size:
            clamp(
                18px,
                1.2vw,
                22px
            );
    }


    .main-services .services-grid--4 .rectangle-block .title,
    .main-services .services-grid--4 .rectangle-block__services__text {
        font-size:
            clamp(
                16px,
                1vw,
                19px
            );

        line-height: 1.45;
    }
}


/* =========================================================
   ОЧЕНЬ БОЛЬШОЙ DESKTOP
   1921+
   ========================================================= */

@media (min-width: 1921px) and (min-device-width: 2200px) {

    .main-services .row.services-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        column-gap:
            clamp(
                27px,
                1.7vw,
                40px
            );

        row-gap:
            clamp(
                31px,
                1.8vw,
                44px
            );
    }


    .main-services .services-grid--4 .rectangle-block {
        min-height:
            clamp(
                410px,
                19vw,
                540px
            );

        padding:
            clamp(
                35px,
                1.7vw,
                48px
            );
    }


    .main-services .services-grid--4 .main-advantages__icon {
        width:
            clamp(
                67px,
                3.7vw,
                96px
            );

        height:
            clamp(
                67px,
                3.7vw,
                96px
            );

        margin-bottom:
            clamp(
                30px,
                1.6vw,
                42px
            );
    }


    .main-services .services-grid--4 .main-advantages__icon img {
        width: 100%;
        height: 100%;
    }


    .main-services .services-grid--4 .rectangle-block h3 {
        margin-bottom:
            clamp(
                20px,
                1vw,
                28px
            );

        font-size:
            clamp(
                22px,
                1.25vw,
                32px
            );
    }


    .main-services .services-grid--4 .rectangle-block .title,
    .main-services .services-grid--4 .rectangle-block__services__text {
        font-size:
            clamp(
                19px,
                1.05vw,
                27px
            );

        line-height: 1.45;
    }
}