.mieinfo-home-cards-widget {
--mihc-primary: #0d6efd;
--mihc-primary-soft: #eef5ff;
--mihc-border: rgba(13, 110, 253, 0.12);
--mihc-text: #15304f;
}
.mieinfo-home-cards__body {
padding: 16px;
background:
radial-gradient(circle at top right, rgba(13, 110, 253, 0.1), transparent 46%),
linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.mieinfo-home-cards__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.mieinfo-home-card {
min-height: 152px;
display: grid;
grid-template-rows: 76px 1fr;
align-items: start;
justify-items: center;
row-gap: 10px;
padding: 18px 12px;
border: 1px solid var(--mihc-border);
border-radius: 20px;
background: #fff;
color: var(--mihc-text);
text-align: center;
text-decoration: none;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.mieinfo-home-card:hover,
.mieinfo-home-card:focus {
transform: translateY(-4px);
border-color: rgba(13, 110, 253, 0.28);
box-shadow: 0 16px 30px rgba(13, 110, 253, 0.14);
color: var(--mihc-text);
text-decoration: none;
}
.mieinfo-home-card__icon-badge {
position: relative;
align-self: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #0d6efd 0%, #68a0ff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px rgba(13, 110, 253, 0.24);
}
.mieinfo-home-card__icon-badge::before {
content: "";
position: absolute;
inset: 18px;
background: center / contain no-repeat var(--mihc-icon);
}
.mieinfo-home-card__text {
display: block;
width: 100%;
align-self: start;
font-size: 11px;
line-height: 1.4;
font-weight: 700;
}
.mieinfo-home-card__icon--globe {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm6.93 9h-3.11a15.709 15.709 0 0 0-1.6-5.01A8.038 8.038 0 0 1 18.93 11ZM12 4.04c.99 1.15 1.79 3.53 1.95 6.96h-3.9C10.21 7.57 11.01 5.19 12 4.04ZM4.07 13h3.11a15.709 15.709 0 0 0 1.6 5.01A8.038 8.038 0 0 1 4.07 13ZM7.18 11H4.07a8.038 8.038 0 0 1 4.71-5.01A15.709 15.709 0 0 0 7.18 11Zm4.82 8.96c-.99-1.15-1.79-3.53-1.95-6.96h3.9c-.16 3.43-.96 5.81-1.95 6.96ZM10.05 11c.16-3.43.96-5.81 1.95-6.96.99 1.15 1.79 3.53 1.95 6.96Zm4.17 7.01A15.709 15.709 0 0 0 15.82 13h3.11a8.038 8.038 0 0 1-4.71 5.01Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--language {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm6.93 9h-3.11a15.709 15.709 0 0 0-1.6-5.01A8.038 8.038 0 0 1 18.93 11ZM12 4.04c.99 1.15 1.79 3.53 1.95 6.96h-3.9C10.21 7.57 11.01 5.19 12 4.04ZM4.07 13h3.11a15.709 15.709 0 0 0 1.6 5.01A8.038 8.038 0 0 1 4.07 13ZM7.18 11H4.07a8.038 8.038 0 0 1 4.71-5.01A15.709 15.709 0 0 0 7.18 11Zm4.82 8.96c-.99-1.15-1.79-3.53-1.95-6.96h3.9c-.16 3.43-.96 5.81-1.95 6.96ZM10.05 11c.16-3.43.96-5.81 1.95-6.96.99 1.15 1.79 3.53 1.95 6.96Zm4.17 7.01A15.709 15.709 0 0 0 15.82 13h3.11a8.038 8.038 0 0 1-4.71 5.01Z'/%3E%3Cpath fill='white' d='M7.5 7.5h9v1.4h-9Zm0 3h5.5v1.4H7.5Zm0 3H11v1.4H7.5Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--disaster-prevention {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3a5.5 5.5 0 0 0-5.46 5H5v2h14V8h-1.54A5.5 5.5 0 0 0 12 3Zm-3.4 5a3.4 3.4 0 0 1 6.8 0ZM9 11h6a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-1-1h-1v5h-4v-5H9a1 1 0 0 0-1 1v4H6v-4a3 3 0 0 1 3-3Z'/%3E%3Cpath fill='white' d='M12 18.5 9.5 17v-2.7l2.5-1.3 2.5 1.3V17Z' opacity='.75'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--conversation {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5a3 3 0 1 0 3 3 3 3 0 0 0-3-3Zm8 1a2.5 2.5 0 1 0 2.5 2.5A2.5 2.5 0 0 0 16 6ZM4 18v-1a4 4 0 0 1 8 0v1Zm8 0v-1a4.8 4.8 0 0 1 .64-2.39A3.5 3.5 0 0 1 20 17v1Z'/%3E%3Cpath fill='white' d='M5 11h7v1.5H7.2L5 14.3Zm10-1h4v1.3h-4Zm0 2.3h3v1.3h-3Z' opacity='.8'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--housing {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 4 3 11h2v8h5v-5h4v5h5v-8h2Zm0 2.7 5 3.9V17h-1.8v-5h-6.4v5H7v-6.4Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--construction-worker {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3a5.2 5.2 0 0 0-5.2 4.6H5.5V10h13V7.6h-1.3A5.2 5.2 0 0 0 12 3Zm-3.3 4.6a3.3 3.3 0 0 1 6.6 0ZM8 11h8a3 3 0 0 1 3 3v5h-2v-5a1 1 0 0 0-1-1h-1.2l-1.1 2.1h-3.4L9.2 13H8a1 1 0 0 0-1 1v5H5v-5a3 3 0 0 1 3-3Z'/%3E%3Cpath fill='white' d='M10.2 16h3.6v1.6h-3.6Z' opacity='.8'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--news {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 4a2 2 0 0 0-2 2v9.5A4.5 4.5 0 0 0 7.5 20H18a3 3 0 0 0 3-3V6a2 2 0 0 0-2-2Zm0 2h12v11a1 1 0 0 1-1 1H7.5A2.5 2.5 0 0 1 5 15.5Zm3 2v2h6V8Zm0 4v2h8v-2Zm0 4v1h5v-1Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--calendar {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v12a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2h2Zm12 8H5v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2Zm-2-4H7v2h10Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--briefcase {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 3a2 2 0 0 0-2 2v2H5a3 3 0 0 0-3 3v2h20v-2a3 3 0 0 0-3-3h-2V5a2 2 0 0 0-2-2Zm0 4V5h6v2Zm13 7H2v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3Zm-11 1h2v2h-2Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--map {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m15.5 3-6 2-5-2A1 1 0 0 0 3 4v15a1 1 0 0 0 .63.93L8.5 22l7-2 5 2A1 1 0 0 0 22 21V6a1 1 0 0 0-.63-.93ZM9 19.82l-4-1.6V5.48l4 1.6Zm6-1.01-4 1.14V7.18l4-1.14Zm5 1.41-3-1.2V6.18l3 1.2Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--school {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m12 3 10 5-10 5L2 8Zm-6 7.4 6 3 6-3V15a6 6 0 0 1-12 0ZM20 9.4V16h-2v-5.6Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--heart {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 21.35 10.55 20C5.4 15.24 2 12.09 2 8.25A5.25 5.25 0 0 1 7.25 3 5.72 5.72 0 0 1 12 5.09 5.72 5.72 0 0 1 16.75 3 5.25 5.25 0 0 1 22 8.25c0 3.84-3.4 6.99-8.55 11.76Z'/%3E%3C/svg%3E");
}
.mieinfo-home-card__icon--chat {
--mihc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm3 5v2h10V9Zm0 4v2h6v-2Z'/%3E%3C/svg%3E");
}
@media (max-width: 991.98px) {
.mieinfo-home-cards__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
}
@media (max-width: 575.98px) {
.mieinfo-home-cards__body {
padding: 12px;
}
.mieinfo-home-cards__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.mieinfo-home-card {
min-height: 110px;
grid-template-rows: 52px 1fr;
padding: 12px 8px;
row-gap: 6px;
border-radius: 16px;
}
.mieinfo-home-card__icon-badge {
width: 44px;
height: 44px;
}
.mieinfo-home-card__icon-badge::before {
inset: 12px;
}
.mieinfo-home-card__text {
font-size: 11px;
line-height: 1.25;
}
}