/* GWATCH ADAPTIVE THUMBNAIL RATIOS V7
   Keeps each uploaded thumbnail/poster in its natural aspect ratio.
   No forced 2:3 crop for catalog thumbnails.
*/

.g3-card,
.g5-card,
.card{
  align-self:flex-start!important;
}

.g3-poster,
.g5-poster,
.poster{
  aspect-ratio:var(--gw-thumb-ratio, 2 / 3)!important;
  height:auto!important;
  min-height:0!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:#0d121a!important;
}

.g3-grid,
.g3-rail,
.g5-related-rail,
.rail{
  align-items:flex-start!important;
}

/* Let card height follow the image ratio instead of forcing uniform poster height. */
.g3-card,
.g5-card,
.card{
  height:auto!important;
}

/* Creator Studio / Admin thumbnails also preserve the uploaded ratio. */
.video-poster,
.creator-video-poster,
.sc-admin-poster,
.cs-upload-poster{
  aspect-ratio:var(--gw-thumb-ratio, 1 / 1)!important;
  height:auto!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:#0d121a!important;
}

/* If an actual IMG element exists, never crop or stretch it. */
.gw-natural-thumb,
.g3-poster img,
.g5-poster img,
.poster img,
.video-poster img,
.creator-video-poster img,
.sc-admin-poster img,
.cs-upload-poster img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Mixed-ratio rows need a bit more breathing room. */
.g3-rail,
.g5-related-rail,
.rail{
  padding-bottom:18px!important;
}

@media(max-width:760px){
  .g3-card,
  .g5-card,
  .card{
    min-height:0!important;
  }
}