.mcmp-stories { margin: 18px 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mcmp-stories__heading { margin-bottom: 12px; color: #0967d8; font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .mcmp-stories__rail { display: flex; gap: 16px; padding: 3px 1px 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .mcmp-stories__rail::-webkit-scrollbar { display: none; } .mcmp-story { flex: 0 0 76px; width: 76px; text-align: center; scroll-snap-align: start; } .mcmp-story__link { color: inherit; text-decoration: none; } .mcmp-story__ring { display: block; width: 68px; height: 68px; padding: 3px; margin: 0 auto 7px; background: conic-gradient(#ff3040, #f2b600, #0967d8, #ff3040); border-radius: 50%; } .mcmp-story__ring img, .mcmp-story__fallback { width: 100%; height: 100%; object-fit: cover; background: #0967d8; border: 3px solid #fff; border-radius: 50%; } .mcmp-story__fallback { display: grid; place-items: center; color: #fff; font-weight: 900; } .mcmp-story__title { display: -webkit-box; overflow: hidden; font-size: 11px; font-weight: 750; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .mcmp-story small { display: block; margin-top: 3px; color: #667085; font-size: 8px; text-transform: uppercase; } .mcmp-engagement { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; margin: 22px 0; background: var(--mc-surface, #fff); border: 1px solid var(--mc-border, #e5e7eb); border-radius: 14px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mcmp-views { margin-right: auto; color: #667085; font-size: 13px; font-weight: 700; } .mcmp-like, .mcmp-share a, .mcmp-share button, .mcmp-social-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 13px; color: inherit; background: var(--mc-surface, #fff); border: 1px solid var(--mc-border, #e5e7eb); border-radius: 999px; font: 750 13px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; } .mcmp-like { gap: 7px; } .mcmp-like[aria-pressed="true"] { color: #fff; background: #e11d48; border-color: #e11d48; } .mcmp-like.is-loading { opacity: .6; } .mcmp-reading-time { color: #667085; font: 700 13px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mcmp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 16px 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mcmp-share > span { margin-right: 4px; color: #667085; font-size: 12px; font-weight: 800; } .mcmp-share a:hover, .mcmp-share button:hover, .mcmp-social-links a:hover { color: #fff; background: #0967d8; border-color: #0967d8; } .mcmp-social-links { display: flex; flex-wrap: wrap; gap: 8px; } .mcmp-ad { position: relative; width: min(1180px, calc(100% - 24px)); margin: 16px auto; text-align: center; } .mcmp-ad--device-mobile { display: none !important; } .mcmp-ad a, .mcmp-ad picture { display: block; } .mcmp-ad img { width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; } .mcmp-ad__label { display: block; margin-bottom: 5px; color: #667085; font: 700 9px/1.2 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; } .mcmp-ad--sidebar { width: 100%; margin: 0 0 18px; } .mcmp-ad--feed { width: 100%; } .mcmp-ad--article-inline, .mcmp-ad--article-after-content { width: 100%; margin: 28px auto; } .mcmp-ad--mobile-fixed { position: fixed; z-index: 9998; right: 8px; bottom: 8px; left: 8px; display: none; width: auto; margin: 0; padding: 5px; background: rgba(255,255,255,.96); border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 35px rgba(15,23,42,.22); } .mcmp-ad--mobile-fixed img { max-height: 92px; } .mcmp-ad__close { position: absolute; z-index: 2; top: -11px; right: -3px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #fff; background: #111827; border: 2px solid #fff; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; } .mcmp-ad[hidden] { display: none !important; } .mc-stories__rail > .mc-ad-slot { flex: 0 0 76px; width: 76px; } .mcmp-story-ad { flex: 0 0 76px; width: 76px; text-align: center; } .mcmp-story-ad__ring { display: block; width: 68px; height: 68px; padding: 3px; margin: 0 auto 7px; background: conic-gradient(#f2b600, #0967d8, #ff3040, #f2b600); border-radius: 50%; } .mcmp-story-ad__ring a, .mcmp-story-ad__ring picture { display: block; width: 100%; height: 100%; } .mcmp-story-ad__ring img { width: 100%; height: 100%; object-fit: cover; border: 3px solid #fff; border-radius: 50%; } .mcmp-story-ad__title { display: -webkit-box; overflow: hidden; font-size: 11px; font-weight: 750; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .mcmp-story-ad small { display: block; margin-top: 3px; color: #667085; font-size: 8px; text-transform: uppercase; } .mcmp-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .mcmp-report-comment { padding: 0; margin-top: 7px; color: #667085; background: transparent; border: 0; font-size: 11px; text-decoration: underline; cursor: pointer; } .mcmp-comment-reported > .comment-body { opacity: .45; } .mcmp-community-ranking { padding: 0; margin: 0; list-style: none; } .mcmp-community-ranking li { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--mc-border, #e5e7eb); } .mcmp-community-ranking a { color: inherit; text-decoration: none; } .mcmp-most-viewed { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mcmp-most-viewed__card { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 13px; background: var(--mc-surface, #fff); border: 1px solid var(--mc-border, #e5e7eb); border-radius: 16px; } .mcmp-most-viewed__media { display: block; min-height: 132px; overflow: hidden; background: #dbe5f0; border-radius: 11px; } .mcmp-most-viewed__media img { width: 100%; height: 100%; object-fit: cover; } .mcmp-most-viewed__content { align-self: center; min-width: 0; } .mcmp-most-viewed__rank { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: #0967d8; border: 2px solid #fff; border-radius: 50%; font-size: 11px; font-weight: 900; } .mcmp-most-viewed__category { color: #0967d8; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .mcmp-most-viewed h2 { margin: 4px 0 7px; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.15; letter-spacing: -.025em; } .mcmp-most-viewed h2 a { color: inherit; text-decoration: none; } .mcmp-most-viewed p { margin: 0; color: #667085; font-size: 11px; font-weight: 650; } .mcmp-most-viewed__empty { padding: 28px; text-align: center; background: var(--mc-surface, #fff); border: 1px solid var(--mc-border, #e5e7eb); border-radius: 14px; } .mcmp-feature-stories-off .mc-stories, .mcmp-feature-likes-off [data-like-button], .mcmp-feature-views-off .mc-engagement__views, .mcmp-feature-reading-time-off .mc-meta > span, .mcmp-feature-sharing-off .mc-share-tools { display: none !important; } .mcmp-share-whatsapp-off .mc-share--whatsapp, .mcmp-share-facebook-off .mc-share--facebook, .mcmp-share-x-off .mc-share--x, .mcmp-share-telegram-off .mc-share--telegram, .mcmp-share-native-off .mc-share--native, .mcmp-share-copy-off .mc-share--copy { display: none !important; } .mcmp-feature-likes-off.mcmp-feature-views-off .mc-engagement { display: none !important; } @media (max-width: 767px) { .mcmp-ad--device-desktop { display: none !important; } .mcmp-ad--device-mobile { display: block !important; } .mcmp-ad--mobile-fixed:not(.mcmp-ad--device-desktop) { display: block; } } @media (max-width: 600px) { .mcmp-stories__rail, .mcmp-share { flex-wrap: nowrap; overflow-x: auto; } .mcmp-share > * { flex: 0 0 auto; } .mcmp-most-viewed__card { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 9px; } .mcmp-most-viewed__media { min-height: 105px; } .mcmp-most-viewed__rank { top: 5px; left: 5px; width: 28px; height: 28px; font-size: 9px; } .mcmp-most-viewed h2 { font-size: 15px; } }