a[aria-label]{ display:block; text-decoration:none; color:inherit; padding:12px 16px 12px 16px; margin-bottom:16px; } /* Card/Image container */ .wrapper{ position:relative; height:220px; padding-bottom:16px; z-index: 0; } /* Image */ .preview-image{ position:absolute; top:50%; left:-20px; transform:translateY(-50%); width:260px; height:220px; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:20px; overflow:hidden; } /* Card */ .preview-box{ position:absolute; top:50%; left:216px; right:0; transform:translateY(-50%); z-index:1; height:184px; background:#ffffffce; border:1px solid #e5e7eb; border-radius:20px; box-shadow:0 14px 28px rgba(0,0,0,0.12); padding:18px 24px; display:flex; flex-direction:column; justify-content:center; gap:10px; } /* Typography */ .preview-label{ font-weight:700; font-size:18px; line-height:1.2; color:#111827; transition:color .2s ease; } .preview-content{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.55; max-height:3.2em; font-size:14px; color:#374151; transition:color .2s ease; } .preview-read-more{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:10px; color:#e11d48; } /* Hover: turn title/content blue */ a[aria-label]:hover .preview-label, a[aria-label]:hover .preview-content{ color:#2563eb !important; } /* ===== Responsive (smaller image; wider/taller card) ===== */ /* <= 768px */ @media (max-width:768px){ a[aria-label]{ padding:12px 0; } .wrapper{ height:224px; } .preview-image{ width:200px; height:210px; left:-20px; } .preview-box{ left:156px; right:0; height:184px; padding:18px 20px; } /* 200 - 44 */ .preview-label{ font-size:16px; } .preview-content, .preview-read-more{ font-size:12.5px; } } /* <= 600px */ @media (max-width:600px){ a[aria-label]{ padding:12px 0; } .wrapper{ height:218px; } .preview-image{ width:170px; height:200px; left:-20px; } .preview-box{ left:126px; right:0; height:180px; padding:16px 18px; } /* 170 - 44 */ .preview-label{ font-size:15.5px; } .preview-content, .preview-read-more{ font-size:12px; } } /* <= 480px */ @media (max-width:480px){ a[aria-label]{ padding:10px 0; } .wrapper{ height:210px; } .preview-image{ width:140px; height:190px; left:-20px; } .preview-box{ left:96px; right:0; height:174px; padding:14px 16px; } /* 140 - 44 */ .preview-label{ font-size:15px; } .preview-content, .preview-read-more{ font-size:11.75px; } } /* <= 380px */ @media (max-width:380px){ a[aria-label]{ padding:8px 0; } .wrapper{ height:204px; } .preview-image{ width:130px; height:184px; left:-20px; } .preview-box{ left:86px; right:0; height:170px; padding:12px 14px; } /* 130 - 44 */ .preview-label{ font-size:14.5px; } .preview-content, .preview-read-more{ font-size:11.5px; } }