1  .thumbnailBig {
  2    background-color: var(--media-thumbnail-background-color);
  3    width: var(--width);
  4    height: var(--height);
  5    max-width: 250px;
  6    max-height: 250px;
  7    margin: 3px 20px 5px 20px;
  8    display: inline-flex;
  9    justify-content: center;
 10    align-items: center;
 11    overflow: hidden;
 12  }
 13  
 14  .floatingEmbed, .subplebbitAvatar {
 15    max-width: 250px;
 16    max-height: 250px;
 17    display: inline-block;
 18  }
 19  
 20  .subplebbitAvatar {
 21    margin: 3px 20px 5px 20px;
 22  }
 23  
 24  .spoiler {
 25    width: 100px;
 26    height: 100px;
 27    margin: 3px 20px 5px 20px;
 28  }
 29  
 30  @media (max-width: 640px) {
 31    .subplebbitAvatar {
 32      max-width: 125px;
 33      max-height: 125px;
 34      margin: 3px 10px 5px 5px;
 35      display: inline-block;
 36    }
 37  
 38    .spoiler {
 39      margin: 3px 10px 5px 5px;
 40    }
 41  }
 42  
 43  .thumbnailSmall {
 44    background-color: var(--media-thumbnail-background-color);
 45    width: var(--width);
 46    height: var(--height);
 47    max-width: 125px;
 48    max-height: 125px;
 49    margin: 3px 10px 5px 5px;
 50    display: inline-flex;
 51    justify-content: center;
 52    align-items: center;
 53    overflow: hidden;
 54  }
 55  
 56  .thumbnailSmall span, .thumbnailSmall a {
 57    width: 100%;
 58    display: inline-block;
 59    word-wrap: break-word;
 60    text-align: center;
 61    cursor: pointer;
 62  }
 63  
 64  .thumbnail {
 65    float: left;
 66  }
 67  
 68  .thumbnail video {
 69    cursor: pointer;
 70  }
 71  
 72  .hide {
 73    display: none !important;
 74  }
 75  
 76  .thumbnail .show {
 77    display: block;
 78  }
 79  
 80  .content img, .content video, .content iframe, .content audio {
 81    max-width: 100%;
 82    max-height: 100%;
 83    object-fit: contain;
 84  }
 85  
 86  .content img {
 87    cursor: pointer;
 88  }
 89  
 90  .content iframe {
 91    border: none;
 92    color-scheme: light;
 93  }
 94  
 95  .fileInfo {
 96    padding-bottom: 5px;
 97    text-align: center;
 98    color: var(--post-mobile-file-info-text-color); 
 99    font-size: 9pt;
100  }
101  
102  .fileInfo a {
103    color: var(--post-link-text-color);
104    text-decoration: var(--post-link-text-decoration);
105  }
106  
107  .fileInfo a:hover {
108    color: var(--post-link-text-color-hover);
109  }
110  
111  .closeButton {
112    text-align: center;
113    padding: 5px 0 10px 0;
114  }
115  
116  .thumbnailReplyDesktop {
117    margin: 3px 20px 5px 20px;
118  }
119  
120  .thumbnailMobile {
121    margin: 8px 10px 5px 5px;
122  }
123  
124  .mediaMobile img, .mediaMobile video, .mediaMobile iframe, .mediaMobile audio {
125    padding: 3px 0 5px 0;
126  }
127  
128  .mediaDesktopReply img, .mediaDesktopReply video, .mediaDesktopReply iframe, .mediaDesktopReply audio {
129    padding: 3px 20px 5px 20px;
130  }
131  
132  .mediaDesktopOp {
133    max-width: calc(100% - 40px);
134    box-sizing: border-box;
135  }
136  
137  .mediaDesktopOp img, .mediaDesktopOp video, .mediaDesktopOp iframe, .mediaDesktopOp audio {
138    padding: 3px 20px 5px 20px;
139    max-width: 100%;
140    box-sizing: border-box;
141  }
142  
143  .fileDeleted {
144    image-rendering: pixelated;
145  }
146  
147  @media (min-width: 640px) {
148    .thumbnail,
149    .content {
150      line-height: 0; /* Ensure no extra space due to line-height */
151    }
152  }