body { background: #d6d6d6; font-family: 'Montserrat', sans-serif; } .horizontal-block { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 20px; } .card { background: #fafafa; border-radius: 5px; padding: 10px 20px 25px 25px; /* Верх: 10px, Справа: 20px, Низ: 25px, Слева: 20px */ width: 378px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border: 1px solid #ccc; display: flex; flex-direction: column; justify-content: flex-start; height: 190px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px) scale(1.02); /* Поднимаем и немного увеличиваем карточку */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .card-title { font-size: 16px; font-weight: 600; color: #333333; margin-bottom: 15px; } .card-price { font-size: 18px; font-weight: bold; color: #f25252; margin-bottom: auto; } .card-button { display: inline-block; padding: 10px 15px; border: 1px solid #333333; color: #333333; text-decoration: none; font-size: 14px; border-radius: 5px; transition: background 0.3s, color 0.3s; align-self: flex-start; margin-top: 10px; } .card-button:hover { background: #333333; color: white; }