/*---WIDGETS---*/

: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 !important } a[aria-label], a[aria-label]:link, a[aria-label]:visited, a[aria-label]:hover, a[aria-label]:focus, a[aria-label]:active { text-decoration: none !important; color: inherit !important } a[aria-label]*, a[aria-label]:hover * { text-decoration: none !important } .wrapper { width: 100%; background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; transition: transform .18s ease, background .18s ease; will-change: transform } a[aria-label]:hover .wrapper, a[aria-label]:focus-within .wrapper { transform: translateY(-2px); background: #F5F7FA !important } @media (prefers-reduced-motion:reduce) { .wrapper { transition: background .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; padding-left: 10px !important; box-sizing: border-box; background: #fff; border: 0; border-radius: 0; overflow: hidden; transition: background .18s ease } a[aria-label]:hover .preview-box, a[aria-label]:focus-within .preview-box { background: #F5F7FA !important } .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, .preview-read-more { display: none !important } @media (max-width:480px) { .preview-image { height: 150px } .preview-box { padding: 12px 0 16px 0 !important; padding-left: 10px !important } .preview-label { font-size: 18px; line-height: 1.2 } .preview-pill { font-size: 11px } }