:root {
  --post-card-height: 460px;
  --post-card-aspect-ratio: 16/9;
  --post-card-min-height: 260px;
  --post-reel-height: 580px;
  --post-reel-aspect-ratio: 9/16;
}

@media (max-width: 767px) {
  :root {
    --post-card-height: 320px;
    --post-card-aspect-ratio: 4/5;
    --post-card-min-height: 220px;
    --post-reel-height: 460px;
    --post-reel-aspect-ratio: 9/16;
  }
}

.post-media-image,
.post-media-image-wrapper {
  position: relative;
}

.post-media-image {
  overflow: hidden;
  border-radius: 5px;
  width: 100%;
  height: auto;
  min-height: var(--post-card-min-height);
  max-height: var(--post-card-height);
  aspect-ratio: var(--post-card-aspect-ratio);
  position: relative;
  background: #f2f4f8;
}

.post-media-image img,
.post-media-image .image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.post-media-image>.pg_wrapper,
.post-media-image>.plyr__video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.post-media-image .image {
  background-size: contain;
  background-position: center center;
  padding-top: 0;
}

/* funding covers should fill the media area instead of shrinking */
.post-media-image .image.funding-cover {
  aspect-ratio: 16/9;
  height: auto;
  min-height: 220px;
  max-height: var(--post-card-height);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 5px;
}

.pg_1x {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

.pg_1x>a {
  display: block;
  width: 100%;
  height: 100%;
}

.pg_1x img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-media-video {
  position: relative;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background-color: #000;
  aspect-ratio: var(--post-card-aspect-ratio);
  max-height: var(--post-card-height);
  min-height: var(--post-card-min-height);
}

.post-media-video.is-reel {
  aspect-ratio: var(--post-reel-aspect-ratio);
  max-height: var(--post-reel-height);
}

.post-media-video .plyr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.post-media-video video,
.post-media-video iframe,
.post-media-video .plyr__poster,
.post-media-video .plyr__video-embed {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-media-video.is-reel video,
.post-media-video.is-reel .plyr__poster {
  object-fit: cover;
}

/* Prevent cropping/overflow when entering player fullscreen */
.post-media-video .plyr.plyr--fullscreen video,
.post-media-video .plyr.plyr--fullscreen .plyr__poster {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}

.post-media-video .plyr.plyr--fullscreen .plyr__video-wrapper {
  width: 100%;
  height: 100%;
}

/* keep all newsfeed content aligned to the card height */
.post-media > .post-media-image,
.post-media .post-media-video,
.post-media .ratio,
.youtube-player {
  width: 100%;
  max-width: 100%;
}

.post-media-image img,
.youtube-player iframe,
.youtube-player img {
  object-fit: cover;
}

.post-media,
.post-media-image,
.post-media .ratio iframe,
.post-media .ratio video,
.post-media .post-media-video,
.youtube-player {
  width: 100%;
}

.pg_wrapper a,
.pg_1x img {
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.pg_wrapper {
  overflow: visible;
}

.post-body .mt10 > .pg_wrapper {
  padding: 8px;
  margin: 0 6px;
  background: #f8f9fa;
  border-radius: 14px;
}

body.night-mode .post-body .mt10 > .pg_wrapper {
  background: var(--card-dark-hover);
}

@media (max-width: 575px) {
  .post-body .mt10 > .pg_wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
  }
}