.tdx-listing-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg, 24px); } .tdx-listing-grid .videoPost--listing { position: relative; width: 100%; padding: 0 0 var(--space-md, 16px); margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; cursor: pointer; transition: none; } .tdx-listing-grid .videoPost--listing:hover { transform: none; box-shadow: none; border-color: transparent; } .tdx-listing-grid .videoPost--listing .listing-card-media { position: relative; margin-bottom: var(--space-sm, 8px); } .tdx-listing-grid .videoPost--listing .listing-card-cover-link { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md, 8px); } .tdx-listing-grid .videoPost--listing .listing-card-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md, 8px); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .tdx-listing-grid .videoPost--listing:hover .listing-card-cover { transform: scale(1.03); } .tdx-listing-grid .videoPost--listing .listing-card-poster-link { position: absolute; left: 10px; bottom: -72px; z-index: 3; display: block; line-height: 0; } .tdx-listing-grid .videoPost--listing .listing-card-poster { display: block; width: 72px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid #fff; border-radius: var(--radius-sm, 3px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .tdx-listing-grid .videoPost--listing .listing-card-info { position: static; width: 100%; padding: var(--space-sm, 8px) 0 var(--space-md, 16px); background: none; } .tdx-listing-grid .videoPost--listing .listing-card-media--has-poster + .listing-card-info { padding-left: 88px; min-height: 44px; } .tdx-listing-grid .videoPost--listing .listing-card-title { margin: 0 0 4px; font-size: inherit; font-weight: inherit; line-height: 1.2; } .tdx-listing-grid .videoPost--listing .listing-card-title a.videoLink { color: var(--color-text, #fdfdfd); font-weight: 700; text-transform: uppercase; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-height: none; margin-bottom: 0; text-shadow: none; font-size: var(--fs-sm, 0.813rem); letter-spacing: 0.02em; } .tdx-listing-grid .videoPost--listing:hover .listing-card-title a.videoLink { color: var(--color-accent, #e85d04); } .tdx-listing-grid .videoPost--listing .listing-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm, 8px); color: var(--color-text-dim, #999); font-size: var(--fs-xs, 0.75rem); margin-top: 2px; padding-bottom: var(--space-xs, 4px); } .tdx-listing-grid .videoPost--listing .listing-card-views { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-right: 20px; } .tdx-listing-grid .videoPost--listing .listing-card-views i, .tdx-listing-grid .videoPost--listing .listing-card-views svg { width: 14px; height: 14px; } .tdx-listing-grid .videoPost--listing .listing-card-cover-link .cw-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; z-index: 3; border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); } .tdx-listing-grid .videoPost--listing .listing-card-cover-link .cw-progress-fill { height: 100%; background: #ff5e62; transition: width 0.2s ease; } @media (max-width: 1200px) { .tdx-listing-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .tdx-listing-grid { grid-template-columns: 1fr; gap: var(--space-md, 16px); } .tdx-listing-grid .videoPost--listing .listing-card-poster { width: 56px; } .tdx-listing-grid .videoPost--listing .listing-card-poster-link { bottom: -28px; } .tdx-listing-grid .videoPost--listing .listing-card-media--has-poster + .listing-card-info { padding-left: 68px; min-height: 36px; } } @media (max-width: 480px) { .tdx-listing-grid { gap: var(--space-sm, 12px); } .tdx-listing-grid .videoPost--listing .listing-card-poster { width: 48px; } .tdx-listing-grid .videoPost--listing .listing-card-poster-link { left: 6px; bottom: -24px; } .tdx-listing-grid .videoPost--listing .listing-card-media--has-poster + .listing-card-info { padding-left: 58px; } }