/* Shared by React and Django. Approved artwork: 1024 × 1536 px (2:3).
   Size responsively; preserve the original artwork without cropping or zoom. */
.course-poster {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 2 / 3;
  flex: none;
  align-self: flex-start;
  overflow: hidden;
  background: #f6f4fa;
}

.course-poster > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center;
  transform: none !important;
}

.course-poster--thumbnail { width: 3rem; }
.course-poster--table { width: 2.5rem; }
.course-poster--cart { width: 5rem; }

@media (min-width: 640px) {
  .course-poster--learning { width: 10rem; }
}

@media (min-width: 768px) {
  .course-poster--featured { width: 50%; }
}

/* A tall poster must not pin the purchase controls below the viewport. */
.course-detail-side.course-poster-purchase-side { position: static; }