/*серый цвет фона с непрозрачностью, чтобы было видно фоновую сетку*/
.uc-grayfon,
.uc-grayfon-podz,
.uc-video-inner,
.uc-video-door,
.uc-video-sliding {
    background-color: rgb(245 245 247 / 60%) !important;
}


/*типы сеток - отступы у фото*/
.t774__imgwrapper {
    max-width: calc(100% - 20px);
    left: 10px;
    top: 10px;
    /*border-radius: 20px !important;*/
    /*box-sizing: border-box;*/
}

/*типы сеток - скругление углов у фото*/
.t774__bgimg {
    border-radius: 20px;
    box-sizing: border-box;
}



/*Как мы работаем*/
@media screen and (min-width: 1200px) {
    /* Базовое состояние описания — на всю ширину */
    .crd-desc {
        transition: max-width 0.3s ease-in-out;
        max-width: 100%;
    }

    /* Стилизация карточек */
    .cstm-card {
        transition: all 0.3s ease-in-out;
        filter: grayscale(100%) !important;
    }

    /* ПЕРВАЯ КАРТОЧКА: Активное состояние по умолчанию */
    .cstm-card:first-child {
        filter: grayscale(0) !important;
        width: 180% !important;
    }
    
    /* Текст первой карточки по умолчанию 70% */
    .cstm-card:first-child .crd-desc {
        max-width: 70%;
    }

    /* ЛЮБАЯ КАРТОЧКА ПРИ НАВЕДЕНИИ: Ширина и цвет */
    .cstm-card:hover {
        width: 180% !important;
        filter: grayscale(0) !important;
    }

    /* Текст любой карточки при наведении — 70% */
    .cstm-card:hover .crd-desc {
        max-width: 70% !important;
    }

    /* ЛОГИКА СБРОСА ПЕРВОЙ КАРТОЧКИ: 
       Если наведена любая карточка, КРОМЕ первой */
    .all-cstm-card:has(.cstm-card:hover:not(:first-child)) .cstm-card:first-child {
        filter: grayscale(100%) !important;
        width: 100% !important;
    }

    /* Сброс текста первой карточки до 100%, когда она сужается */
    .all-cstm-card:has(.cstm-card:hover:not(:first-child)) .cstm-card:first-child .crd-desc {
        max-width: 100% !important;
    }
}

/*Подзаголовок в блоке калькулятор. Поменяла выключку текста на мобилке*/
@media screen and (max-width: 640px) {
.uc-grayfon-podz .t017 .t-container {
    text-align: start;
}
}