.tdx-video-story-card { position: relative; margin: 28px 0 34px; padding: 28px; border: 1px solid rgba(255, 94, 98, 0.14); border-radius: 24px; background: radial-gradient(circle at top right, rgba(255, 94, 98, 0.10), transparent 28%), linear-gradient(135deg, rgba(27, 27, 27, 0.98) 0%, rgba(18, 18, 18, 0.98) 100%); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26); overflow: hidden; } .tdx-video-story-card::after { content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .tdx-video-story-card::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 94, 98, 0.92), rgba(255, 153, 0, 0.65), rgba(255, 94, 98, 0)); } .tdx-video-story-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 94, 98, 0.10); color: #ff7c80; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .tdx-video-story-header h2 { margin: 0; color: #f8fafc; font-size: 30px; line-height: 1.1; } .tdx-video-story-header p { margin: 10px 0 0; color: rgba(255, 255, 255, 0.56); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .tdx-video-story-body { margin-top: 22px; color: #d7d7d7; font-size: 16px; line-height: 1.9; max-height: 350px; overflow-y: auto; padding-right: 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.1); } .tdx-video-story-body::-webkit-scrollbar { width: 6px; } .tdx-video-story-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 10px; } .tdx-video-story-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; } .tdx-video-story-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } .tdx-video-story-body p { margin: 0 0 18px; } .tdx-video-story-body p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .tdx-video-story-card { margin: 22px 0 28px; padding: 22px 18px; border-radius: 18px; } .tdx-video-story-card::before { left: 18px; right: 18px; } .tdx-video-story-header h2 { font-size: 24px; } .tdx-video-story-body { font-size: 15px; line-height: 1.8; } }