.mwsc-wrap{width:100%}

/*
  Flex layout so the last row can be centered automatically when it has fewer items
  (e.g., 5 items with 3 columns => last row has 2 items centered).
*/
.mwsc-grid{
  --mwsc-cols:3;
  --mwsc-gap:24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--mwsc-gap);
}

.mwsc-card{
  position:relative;
  overflow:hidden;
  background:#eff7f5;
  border-radius:18px;
  min-height:320px;
  outline:none;
  flex:0 1 calc((100% - (var(--mwsc-cols) - 1) * var(--mwsc-gap)) / var(--mwsc-cols));
}
.mwsc-card:focus{box-shadow:0 0 0 2px rgba(94,158,160,.35)}
.mwsc-bg{width:100%;height:100%;object-fit:cover;display:block;opacity:1}

.mwsc-label{position:absolute;left:22px;right:22px;bottom:18px;height:64px;border-radius:14px;background:#5e9ea0;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease, transform .25s ease;z-index:2}
.mwsc-label span{color:#fff;font-size:26px;line-height:1;font-weight:500}

.mwsc-overlay{position:absolute;left:22px;right:22px;top:22px;bottom:22px;border-radius:14px;background:rgba(255,255,255,.88);backdrop-filter:saturate(140%) blur(2px);opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .28s ease, transform .28s ease;z-index:3;display:flex}
.mwsc-overlay-inner{width:100%;padding:34px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

.mwsc-overlay h3{margin:0 0 12px 0;font-size:40px;line-height:1.05;font-weight:500;color:#2f3b4a;opacity:0;transform:translateY(14px);transition:opacity .28s ease, transform .28s ease}
.mwsc-overlay p{margin:0 0 18px 0;font-size:16px;line-height:1.75;color:#4b5563;opacity:0;transform:translateY(14px);transition:opacity .28s ease, transform .28s ease}

.mwsc-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 34px;border-radius:28px;background:#5e9ea0;color:#fff;text-decoration:none;font-size:15px;font-weight:600;opacity:0;transform:translateY(14px);transition:opacity .28s ease, transform .28s ease}
.mwsc-btn:hover{filter:brightness(.96)}

/* Hover state driven by JS class for reliability */
.mwsc-card.has-overlay.is-hover .mwsc-overlay{opacity:1;pointer-events:auto;transform:translateY(0)}
.mwsc-card.has-overlay.is-hover .mwsc-label{opacity:0;transform:translateY(6px)}

/* stagger */
.mwsc-card.has-overlay.is-hover .mwsc-overlay h3{opacity:1;transform:translateY(0);transition-delay:.05s}
.mwsc-card.has-overlay.is-hover .mwsc-overlay p{opacity:1;transform:translateY(0);transition-delay:.10s}
.mwsc-card.has-overlay.is-hover .mwsc-overlay .mwsc-btn{opacity:1;transform:translateY(0);transition-delay:.15s}

@media (max-width:1024px){
  .mwsc-grid{--mwsc-cols:2}
  .mwsc-overlay-inner{padding:28px 22px}
  .mwsc-overlay h3{font-size:34px}
}
@media (max-width:767px){
  .mwsc-grid{--mwsc-cols:1}
  .mwsc-card{min-height:300px}
  .mwsc-label{height:60px}
  .mwsc-label span{font-size:24px}
}