.mp-area-links {
width: min(760px, calc(100vw - 40px));
max-width: 760px;
margin: 0 auto;
padding: 48px 0;
color: #123b32;
box-sizing: border-box;
}

.mp-area-links,
.mp-area-links * {
box-sizing: border-box;
}

.mp-area-links__inner {
width: 100%;
background: linear-gradient(135deg, #f5fffb, #ffffff);
border: 1px solid #d9eee6;
border-radius: 24px;
padding: 32px;
box-shadow: 0 12px 30px rgba(18, 59, 50, 0.08);
}

.mp-area-eyebrow {
color: #b8934b;
font-weight: 700;
letter-spacing: 0.08em;
font-size: 13px;
margin: 0 0 8px;
}

.mp-area-links h2 {
font-size: clamp(26px, 4vw, 36px);
line-height: 1.35;
margin: 0 0 12px;
color: #0f3f35;
font-weight: 800;
}

.mp-area-lead {
font-size: 15px;
line-height: 1.85;
color: #48645d;
margin: 0;
}

.mp-area-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 24px;
}

.mp-area-card {
display: flex;
flex-direction: column;
gap: 8px;
background: #ffffff;
border: 1px solid #d9eee6;
border-radius: 18px;
padding: 18px;
text-decoration: none;
color: #123b32;
transition: 0.2s ease;
min-height: 142px;
}

.mp-area-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(18, 59, 50, 0.12);
border-color: #a8ded0;
}

.mp-area-card span,
.mp-area-card__name {
font-size: 19px;
line-height: 1.4;
font-weight: 800;
color: #123b32;
}

.mp-area-card strong,
.mp-area-card__count {
display: inline-flex;
align-items: center;
width: fit-content;
background: #ecfaf5;
color: #0f5b49;
border-radius: 999px;
padding: 5px 11px;
font-size: 12.5px;
line-height: 1.4;
font-weight: 800;
}

.mp-area-card small,
.mp-area-card__lead {
color: #5f7f75;
font-size: 12.5px;
line-height: 1.7;
}

.mp-area-mini-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px auto;
justify-content: center;
}

.mp-area-mini-buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 999px;
background: #ecfaf5;
color: #0f5b49;
text-decoration: none;
font-weight: 800;
border: 1px solid #d9eee6;
transition: 0.2s ease;
}

.mp-area-mini-buttons a:hover {
background: #0f5b49;
color: #ffffff;
transform: translateY(-1px);
}

@media (max-width: 768px) {
.mp-area-links {
width: 100%;
max-width: 100%;
padding: 32px 0;
}

.mp-area-links__inner {
padding: 24px 18px;
border-radius: 22px;
}

.mp-area-grid {
grid-template-columns: 1fr;
}

.mp-area-card {
min-height: auto;
}

.mp-area-links h2 {
font-size: 26px;
}

.mp-area-lead {
font-size: 15px;
}
}