:root{ --cat-blue:#1d4ed8; --hover-red:#E51C2A; --text:#0f172a; } a[aria-label]{ display:block; padding:0; margin:0; width:100%; color:inherit; text-decoration:none; } .wrapper{ width:100%; background:#fff; border:0; border-radius:0; box-shadow:none; overflow:hidden; transition:transform .18s ease, filter .18s ease; will-change:transform, filter; } a[aria-label]:hover .wrapper, a[aria-label]:focus-within .wrapper{ transform:translateY(-2px); filter:brightness(0.985); } @media (prefers-reduced-motion:reduce){ .wrapper{transition:filter .18s ease;} a[aria-label]:hover .wrapper, a[aria-label]:focus-within .wrapper{transform:none;} } .preview-image{ width:100%; height:170px; background-size:cover; background-position:center; background-repeat:no-repeat; image-rendering:-webkit-optimize-contrast; } .preview-box{ position:relative; padding:14px 0 18px 0 !important; box-sizing:border-box; background:#fff; border:0; border-radius:0; overflow:hidden; } .preview-pill{ display:block; margin:0 0 10px 0; padding:0; background:transparent; border-radius:0; font-weight:500; font-size:12px; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--cat-blue); transition:opacity .18s ease, color .18s ease; } .preview-label{ margin:0; font-weight:600 !important; font-size:20px; line-height:1.18; color:var(--text) !important; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; transition:opacity .18s ease; } a[aria-label]:hover .preview-pill, a[aria-label]:focus-within .preview-pill{ color:var(--hover-red); } a[aria-label]:hover .preview-label, a[aria-label]:focus-within .preview-label{ opacity:.92; } .preview-content{display:none !important;} .preview-read-more{display:none !important;} @media (max-width:480px){ .preview-image{height:150px;} .preview-box{padding:12px 0 16px 0 !important;} .preview-label{font-size:18px;line-height:1.2;} .preview-pill{font-size:11px;} }