:root{
  --mac_navy:#0f233c;
  --mac_accent:#ff5a2a;
  --mac_shadow:0 14px 30px rgba(0,0,0,.2);
}

/* Per widget variables (defaults) */
.mac_wrap{
  --mac_gap:34px;
  --mac_card:258px;
  --mac_radius:5px;

  max-width:1200px;
  margin:40px auto;
  padding:0 24px;
  font-family:Inter,sans-serif;
}

.mac_grid{
  display:flex;
  gap:var(--mac_gap);
  flex-wrap:wrap;
  justify-content:space-between;
}

.mac_item{ width:260px; }

.mac_card{
  height:var(--mac_card);
  width:var(--mac_card);
  background:#fff;
  box-shadow:var(--mac_shadow);
  position:relative;
  overflow:hidden;
  border-radius:var(--mac_radius);
}

.mac_card--dark{
  background:var(--mac_navy);
  padding:22px 18px;
}

.mac_card--dark p{
  color:#fff;
  font-size:13px;
  line-height:1.55;
  margin:0;
  text-align:center;
}

.mac_card--icon{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.mac_circle img{
  width:var(--mac_card);
  height:var(--mac_card);
  object-fit:contain;
  display:block;
}

/* overlay */
.mac_card-overlay{
  position:absolute;
  inset:0;
  background:rgba(15,35,60,.95);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  font-size:14px;
  line-height:1.5;
  opacity:0;
  z-index:5;
  transform:translateY(8px);
  border-radius:var(--mac_radius);
  transition:
    opacity .65s cubic-bezier(.4,0,.2,1),
    transform .65s cubic-bezier(.4,0,.2,1);
}

.mac_card--icon:hover .mac_card-overlay{
  opacity:1;
  transform:translateY(0);
}

.mac_title{ margin-top:14px; }

.mac_title a{
  font-size:16px;
  font-weight:700;
  color:#0b2347;
  text-decoration:none;
}

.mac_title a:hover{
  color:var(--mac_accent);
  text-decoration:underline;
}

@media(max-width:1100px){
  .mac_grid{ justify-content:center; }
}