.cards_favorites .card .card-id { width: 100%; height: 100%; position: absolute; z-index: 1; } .cards_favorites { flex-direction: column; column-gap: 10px; /* Отступ между колонками */ row-gap: 2px; display: flex; } .cards_favorites .card { weight: 100%; min-height: 150px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); display: flex; flex-direction: row; /* Размещаем элементы в колонку */ border-radius: 7px; transition: 0.2s; position: relative; } .cards_favorites .card .card__top { flex: 0 0 150px; /* Задаем высоту 250px, запрещаем расширение и сужение по высоте */ position: relative; overflow: hidden; /* Скрываем, что выходит за пределы */ } /* Контейнер для картинки */ .cards_favorites .card .card__top .card__image { display: block; position: absolute; top: 0; left: 0; width: 150px; height: 150px; } .cards_favorites .card .card__top .card__image > img { width: 100%; height: 100%; border-radius: 7px; } .cards_favorites .card .card__bottom { display: flex; flex-direction: column; padding: 10px; } .cards_favorites .card .card__bottom .card__prices { display: flex; align-items: center; /* Выравнивание по вертикали */ } .cards_favorites .card .card__bottom .favourites { position: absolute; /* Сделаем элемент абсолютным */ top: 0; /* Располагаем элемент в верхней части */ right: 0; /* Располагаем элемент в правой части */ margin: 10px; width: 23px; height: 23px; display: flex; /* Используем Flexbox */ align-items: center; /* Центрируем по вертикали */ justify-content: center; /* Центрируем по горизонтали */ } .cards_favorites .card .card__bottom .favourites .icon-favourites { cursor: pointer; position: relative; /* Устанавливаем позицию для управления наложением */ z-index: 0; } .cards_favorites .card .card__bottom .favourites-true .icon-favourites { fill: #00c906; } .cards_favorites .card .card__bottom .favourites-false .icon-favourites { fill: #d1d1d1; } .cards_favorites .card .card__bottom .favourites .id-favourites { width: 100%; /* Занимаем всю ширину родителя */ height: 100%; /* Занимаем всю высоту родителя */ margin: 0; /* Убираем отступы */ z-index: 5; position: absolute; /* Делаем элемент абсолютным для правильного наложения */ } .cards_favorites .card .card__bottom .card__prices .card__price { margin-right: 10px; /* Отступ между элементами (если нужен) */ } .cards_favorites .card .card__bottom .card__prices .card__price::after { content: "₽"; margin-left: 4px; position: relative; } .cards_favorites .card .card__bottom .card__prices .card__price--discount { font-weight: 700; font-size: 15px; color: #267359; } .cards_favorites .card .card__bottom .card__prices .card__price_old_price { display: flex; align-items: center; } .cards_favorites .card .card__bottom .card__prices .card__price_old_price .card__price--common { font-weight: 400; font-size: 13px; color: #c72d0a; text-decoration: line-through; /* Зачеркивание */ margin-right: 2px; } .cards_favorites .card .card__bottom .card__prices .card__price_old_price .card__label { color: #c72d0a; font-weight: 400; font-size: 13px; } .cards_favorites .card .card__bottom .card__title { text-decoration: none; display: block; font-weight: 600; font-size: 13px; color: #000000; white-space: normal; } .cards_favorites .card .card__bottom .card__short_description { text-decoration: none; display: block; font-weight: 400; font-size: 10px; color: #000000; white-space: normal; max-height: 4.5em; /* Установите максимальную высоту в зависимости от количества строк */ overflow: hidden; /* Обрезка текста */ display: -webkit-box; /* Для поддержки многострочного обрезания */ -webkit-line-clamp: 3; /* Количество отображаемых строчек */ -webkit-box-orient: vertical; /* Вертикальная ориентация блока */ } .cards_favorites .card_condition_true .card__bottom .card__condition { font-weight: 400; font-size: 9px; color: #287330; text-decoration: none; } .cards_favorites .card_condition_true .card__bottom .card__condition::before { content: "✔ В наличии"; } .cards_favorites .card_condition_false .card__bottom .card__condition { font-weight: 400; font-size: 9px; color: #8a2d2d; text-decoration: none; } .cards_favorites .card_condition_false .card__bottom .card__condition::before { content: "❌ Нет в наличии"; } @media (min-width: calc(250px * 3 + (20px * (3 - 1)) + 40px)) { /* При наведении на карточку - меняем цвет тени */ .cards_favorites .card:hover { box-shadow: 4px 8px 16px rgba(250, 230, 180, 0.2); } .cards_favorites .card .card__bottom .card__prices .card__price--discount { font-size: 17px; } .cards_favorites .card .card__bottom .card__title { font-size: 17px; } .cards_favorites .card .card__bottom .card__short_description { font-size: 14px; } .cards_favorites .card_condition_true .card__bottom .card__condition { font-size: 11px; } .cards_favorites .card_condition_false .card__bottom .card__condition { font-size: 11px; } .cards_favorites .card .card__bottom .favourites:hover .icon-favourites { transform: scale(1.1); /* Увеличиваем размер при наведении */ } }