:root{
  --msp-primary:#0891B2;
  --msp-text:#0b1220;
  --msp-muted:#64748b;
  --msp-border:#e5e7eb;
  --msp-bg:#ffffff;
  --msp-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.msp-heading{margin:0 0 1rem 0; font-size:clamp(1.4rem, 2.5vw, 2rem)}
.msp-grid{display:grid; gap:1rem}
/*.msp-card{background:#fff; border:1px solid var(--msp-border); border-radius:1rem; overflow:hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03)}*/
.msp-media{display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer}
.msp-img, .msp-placeholder{display:block; width:100%; background:#f1f5f9; background-size:cover; background-position:center;}
.ratio-1x1{aspect-ratio:1/1}
.ratio-4x3{aspect-ratio:4/3}
.ratio-16x9{aspect-ratio:16/9}
.msp-body{
	padding: 1rem 1rem 1.25rem; text-align: left;
}
.msp-kicker{color:var(--msp-primary); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; margin-bottom:.25rem}
.msp-title{margin:.2rem 0 .4rem; font-size:1.1rem}
.msp-intro{margin:0 0 .75rem 0; color:var(--msp-muted)}
.msp-actions{display:flex; align-items:center; gap:.75rem}
.msp-btn{display:inline-flex; align-items:center; justify-content:center; padding:.55rem .9rem; border-radius:.6rem; background:var(--msp-primary); color:#fff; border:1px solid transparent; font-weight:600}
.msp-btn:hover{opacity:.95}
.msp-link{font-size:.9rem; color:var(--msp-muted);}
.msp-modal{position:fixed; inset:0; display:none; z-index:9999}
.msp-modal[aria-hidden="false"]{display:block}
.msp-modal__overlay{position:absolute; inset:0; background:rgba(2,6,23,.6);}
.msp-modal__dialog{position:relative; background:var(--msp-bg); border-radius:1rem; max-width:min(920px, 92vw); margin:6vh auto; box-shadow: var(--msp-shadow); overflow:hidden}
.msp-modal__close{position:absolute; top:.5rem; right:.75rem; font-size:1.8rem; line-height:1; border:0; background:transparent; color:#334155; cursor:pointer}
.msp-modal__media img{width:100%; display:block}
.msp-modal__content{padding:1rem 1.25rem 1.5rem}
.msp-modal__content h3{margin:.25rem 0 .5rem}
.msp-modal__text{color:#334155}
@media (min-width: 900px){
  .msp-modal__dialog{display:grid; grid-template-columns: 1fr 1fr}
  .msp-modal__media{height:100%}
  .msp-modal__media img{height:100%; object-fit:cover}
}