html, body { margin: 0; font-family: sans-serif; } .plyr { width: 100vw; height: 100vh; } .video-list { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 2rem; } .video-list li { width: fit-content; } .video-card { display: flex; flex-direction: column; max-width: 320px; font-weight: normal } .video-card h2 { font-size: 16px; font-weight: normal; cursor: pointer; margin: 4px; /* opacity: 0; */ } /* .video-card:hover h2 { opacity: 1; } */ .thumbnail-container { position: relative; height: fit-content; } .thumbnail-duration { opacity: 0; position: absolute; bottom: 8px; right: 4px; color: white; padding: 4px; border-radius: 4px; background-color: rgba(0, 0, 0, .45); margin: 0; } .video-card:hover .thumbnail-duration { opacity: 1; } .thumbnail { max-width: 320px; border-radius: 8px; }