.demo4-related {margin-top:40px;}
.demo4-related-heading {display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid #dce2e7;}
.demo4-related-heading h2 {margin:0; color:#263238; font-size:23px; line-height:1.3; font-weight:700;}
.demo4-related-heading > span {font-size:12px; color:#788590; white-space:nowrap;}
.demo4-related-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch;}
.demo4-related-card {min-width:0; margin:0; background:#fff; border:1px solid #e1e6ea; border-radius:8px; overflow:hidden; box-shadow:0 2px 5px rgba(25,42,56,.05); transition:box-shadow .2s,transform .2s;}
.demo4-related-card:hover {transform:translateY(-3px); box-shadow:0 6px 18px rgba(25,42,56,.12);}
.demo4-related-link {display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none;}
.demo4-related-link:focus-visible {outline:3px solid #298fce; outline-offset:-3px;}
.demo4-related-media {aspect-ratio:16/10; overflow:hidden; background:#e7eef3; display:grid; place-items:center; color:#718492;}
.demo4-related-media img {display:block; width:100%; height:100%; object-fit:cover;}
.demo4-related-body {display:flex; flex-direction:column; flex:1; padding:18px;}
.demo4-related-category {color:#207fb6; font-size:10px; line-height:1.4; font-weight:700; letter-spacing:.8px; text-transform:uppercase; margin-bottom:10px;}
.demo4-related-body h3 {margin:0 0 14px; font-size:16px; line-height:1.4; color:#263238; font-weight:700; overflow-wrap:anywhere;}
.demo4-related-body time {margin-top:auto; font-size:12px; color:#7e8992;}
.demo4-related-more {display:flex; justify-content:space-between; gap:10px; margin-top:16px; padding-top:13px; border-top:1px solid #edf0f2; color:#237fae; font-weight:600; font-size:12px;}
@media(max-width:600px) {
  .demo4-related {margin-top:32px;}
  .demo4-related-grid {grid-template-columns:1fr; gap:18px;}
  .demo4-related-heading h2 {font-size:21px;}
  .demo4-related-heading > span {display:none;}
}
@media(prefers-reduced-motion:reduce) {.demo4-related-card {transition:none;}.demo4-related-card:hover {transform:none;}}