.playListThumbnail {
inline-size: 100%;
}
.playlistThumbnail .firstVideoLink {
cursor: pointer;
.playlistThumbnail img {
// Ensure placeholder image displayed at same aspect ratio as most other images
aspect-ratio: 16/9;
@media only screen and (max-width: 800px) {
display: none;
.playlistStats {
font-size: 15px;
.playlistStats p {
color: var(--secondary-text-color);
margin: 0;
.playlistTitle {
margin-block-end: 0.1em;
.playlistDescription {
max-block-size: 20vh;
overflow-y: auto;
white-space: break-spaces;
@media only screen and (max-width: 500px) {
max-block-size: 10vh;
.playlistChannel {
align-items: center;
color: inherit;
display: flex;
gap: 8px;
block-size: 40px;
text-decoration: none;
.channelThumbnail {
border-radius: 200px;
float: var(--float-left-ltr-rtl-value);
inline-size: 40px;
.channelName {
word-break: break-all;
.channelShareWrapper {
column-gap: 8px;
display: grid;
grid-template-columns: auto minmax(min-content, 1fr);
.playlistOptions {
grid-auto-flow: column;
justify-content: flex-end;
@media only screen and (max-width: 1250px) {
:deep(.sharePlaylistIcon .iconDropdown) {
inset-inline-start: auto;
inset-inline-end: auto;