.communityPreviewVideoWrapper {
  display: flex;
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: 800px;
}
.communityPreviewVideo {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.communityPreviewVideo .thumbnailPreview {
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}
.communityPreviewVideo .postPreview {
  background: #fff;
  padding: 16px
}
.communityPreviewVideo .thumbnailImage {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 16/9;
}
.communityPreviewVideo .playButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12%;
  opacity: 0;
  transition: opacity 0.2s;
  isolation: isolate;
}
@media (pointer: fine) {
  .communityPreviewVideo .thumbnailPreview:hover .thumbnailImageWrapper {
    filter: contrast(0.8);
  }
  .communityPreviewVideo .thumbnailPreview:hover .playButton {
    opacity: 1;
    filter: contrast(2);
  }
}
.xl-l .communityPreviewVideoWrapper {
  flex: 0 0 calc((100% - 24px) / 2);
}
.md-l .communityPreviewVideoWrapper {
  flex: 0 0 100%;
}