.underline-one {
    color: black; /* Цвет обычной ссылки */
    position: relative;
    cursor: pointer;
    text-decoration: none; /* Убираем подчеркивание */
}

    .underline-one:after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        bottom: -3px;
        width: 0;
        height: 2px; /* Высота линии */
        background-color: black; /* Цвет подчеркивания при исчезании линии*/
        transition: width 0.5s; /* Время эффекта */
    }

    .underline-one:hover:after {
        content: "";
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: -3px;
        height: 2px; /* Высота линии */
        background-color: red; /* Цвет подчеркивания при появлении линии*/
        transition: width 0.5s; /* Время эффекта */
    }

.grey-image {
    filter: grayscale(1); /* Черно-белый фильтр для изображения */
    transition: 1s; /* Время изменения цвета изображения */
}

    .grey-image:hover {
        filter: grayscale(0); /* Цветное изображение при наведении */
    }


.blur-image {
    filter: blur(3px); /* Размытие изображения */
    transition: 1s; /* Время перехода */
}

    .blur-image:hover {
        filter: blur(0); /* Отменяем размытие */
    }