/* Match the page grid while preserving each complete course cover. */
.ph-banner.ph-course-banner {
  width: min(1200px, calc(100% - 48px));
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  margin: 24px auto 0;
  border-radius: 12px;
  background: #e7f0fa;
}
.ph-banner.ph-course-banner .ph-banner-slide { background: #e7f0fa; }
.ph-banner.ph-course-banner .ph-banner-backdrop {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(24px);
  opacity: .42;
  pointer-events: none;
}
.ph-banner.ph-course-banner .ph-banner-image {
  object-fit: contain;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}
.ph-banner.ph-course-banner .ph-banner-target { position: relative; z-index: 2; }
@media (max-width: 600px) {
  .ph-banner.ph-course-banner {
    width: calc(100% - 32px);
    margin-top: 16px;
    max-height: none;
    border-radius: 8px;
  }
  .ph-banner.ph-course-banner .ph-banner-backdrop { display: none; }
}