Инжиниринг и цифровые решения
<!-- Программы ДПО — карточки на всю ширину, друг под другом -->
<div class="dpo-cards-vertical">
<div class="dpo-card-full">
<p class="card-title">
Практическая цифровизация
</p>
<p class="card-title">
<a href="./program/ekonomika-dannykh-dlya-selkhoztovaroproizvoditeley-optimizatsiya-biznes-protsessov-rastenievodstvo-zh.php" class="card-btn" style="font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));">Подробнее</a><br>
</p>
</div>
<div class="dpo-card-full">
<p class="card-title">
Искусственный интеллект в животноводстве: автоматизация технологических и бизнес-процессов
</p>
<a href="#" class="card-btn">Подробнее</a>
</div>
</div>
<style>
.dpo-cards-vertical {
display: flex;
flex-direction: column;
gap: 20px;
margin: 28px 0;
}
.dpo-card-full {
width: 100%;
background: white;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 24px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
transition: box-shadow 0.2s, transform 0.2s;
}
.dpo-card-full:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.card-title {
font-family: 'akony', sans-serif;
font-size: 1.375rem;
line-height: 1.4;
margin: 0 0 18px;
color: #1e40af;
font-weight: normal;
}
.card-btn {
display: inline-block;
background: #1e40af;
color: white;
text-decoration: none;
padding: 10px 24px;
border-radius: 8px;
font-family: 'akony', sans-serif;
font-size: 1.0625rem;
font-weight: 500;
transition: background 0.2s;
}
.card-btn:hover {
background: #1e3a8a;
text-decoration: none;
}
</style><br>