.thumbnailBig { background-color: var(--media-thumbnail-background-color); width: var(--width); height: var(--height); max-width: 250px; max-height: 250px; margin: 3px 20px 5px 20px; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; } .floatingEmbed, .subplebbitAvatar { max-width: 250px; max-height: 250px; display: inline-block; } .subplebbitAvatar { margin: 3px 20px 5px 20px; } .spoiler { width: 100px; height: 100px; margin: 3px 20px 5px 20px; } @media (max-width: 640px) { .subplebbitAvatar { max-width: 125px; max-height: 125px; margin: 3px 10px 5px 5px; display: inline-block; } .spoiler { margin: 3px 10px 5px 5px; } } .thumbnailSmall { background-color: var(--media-thumbnail-background-color); width: var(--width); height: var(--height); max-width: 125px; max-height: 125px; margin: 3px 10px 5px 5px; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; } .thumbnailSmall span, .thumbnailSmall a { width: 100%; display: inline-block; word-wrap: break-word; text-align: center; cursor: pointer; } .thumbnail { float: left; } .thumbnail video { cursor: pointer; } .hide { display: none !important; } .thumbnail .show { display: block; } .content img, .content video, .content iframe, .content audio { max-width: 100%; max-height: 100%; object-fit: contain; } .content img { cursor: pointer; } .content iframe { border: none; color-scheme: light; } .fileInfo { padding-bottom: 5px; text-align: center; color: var(--post-mobile-file-info-text-color); font-size: 9pt; } .fileInfo a { color: var(--post-link-text-color); text-decoration: var(--post-link-text-decoration); } .fileInfo a:hover { color: var(--post-link-text-color-hover); } .closeButton { text-align: center; padding: 5px 0 10px 0; } .thumbnailReplyDesktop { margin: 3px 20px 5px 20px; } .thumbnailMobile { margin: 8px 10px 5px 5px; } .mediaMobile img, .mediaMobile video, .mediaMobile iframe, .mediaMobile audio { padding: 3px 0 5px 0; } .mediaDesktopReply img, .mediaDesktopReply video, .mediaDesktopReply iframe, .mediaDesktopReply audio { padding: 3px 20px 5px 20px; } .mediaDesktopOp { max-width: calc(100% - 40px); box-sizing: border-box; } .mediaDesktopOp img, .mediaDesktopOp video, .mediaDesktopOp iframe, .mediaDesktopOp audio { padding: 3px 20px 5px 20px; max-width: 100%; box-sizing: border-box; } .fileDeleted { image-rendering: pixelated; } @media (min-width: 640px) { .thumbnail, .content { line-height: 0; /* Ensure no extra space due to line-height */ } }