/* карточки: */ .cards{ margin: 0; padding: 0px 8%; list-style-type: none; display: flex; } .cards-item{ padding: 30px 15px; } .cards-item .card{ height: 100%; } .cards-item:not(:last-child){ margin-right: 20px; } .card{ width: 350px; background-color: gainsboro; display: flex; flex-direction: column; border: 1px solid rgb(62, 58, 58); border-radius: 20px; /* добавляем закругленные углы */ transition: box-shadow 0.3s ease, border 0.5s ease; /* Добавляем плавный переход для эффекта */ } .card:hover{ box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3); /* Устанавливаем размытую тень наружу при наведении */ border: none; } .card-img{ height: 250px; } .card-img img{ width: 100%; height: 100%; object-fit: cover; border-top-left-radius:20px ; border-top-right-radius:20px ; } .card-content{ padding: 20px; /* Займет все оставшееся место */ flex-grow: 1; display: flex; flex-direction: column; } .card-title{ margin: 0; margin-bottom: 15px; font-size: 24px; font-family: "Advent Pro", sans-serif; font-optical-sizing: auto; font-weight: bold; } .card-descr{ margin: 0; margin-bottom: 15px; font-size: 18px; font-family: "Advent Pro", sans-serif; font-optical-sizing: auto; } .card-price{ margin: 0; margin-bottom: 15px; font-size: 18px; font-family: "Advent Pro", sans-serif; font-optical-sizing: auto; font-weight: bold; } .card-btn{ margin-top: auto; padding: 10px 20px; background-color: #000; border: none; border-radius: 5px; color: white; transition: transform 0.3s ease; /* Добавляем плавные переходы для эффектов */ } .card-btn:hover{ transform: scale(1.04); /* Увеличиваем размер кнопки при наведении */ }