/* Legacy compatibility for unchanged pages outside Home V9. */
.steam-membership-panel--spacing-v1 {
  grid-template-areas: "content side" "plans side";
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
  column-gap: 42px;
  row-gap: 24px;
  align-items: stretch;
  padding: 36px;
}
.steam-membership-panel--spacing-v1 .steam-membership-panel__content { grid-area: content; align-self: start; gap: 16px; }
.steam-membership-panel--spacing-v1 .steam-membership-panel__side { grid-area: side; min-height: 100%; }
.steam-membership-panel--spacing-v1 .steam-membership-panel__media { min-height: 0; height: 100%; }
.steam-membership-panel--spacing-v1 .steam-membership-panel__plans { grid-area: plans; grid-column: auto; grid-template-columns: 1fr; align-self: end; }
.steam-membership-panel--spacing-v1 .steam-membership-panel__plans article { min-height: 0; padding: 26px 30px; border-right: 0; border-bottom: 1px solid rgba(5, 11, 29, 0.08); }
.steam-membership-panel--spacing-v1 .steam-membership-panel__plans article:last-child { border-bottom: 0; }

@media (max-width: 820px) {
  .steam-membership-panel--spacing-v1 { grid-template-areas: "content" "side" "plans"; grid-template-columns: 1fr; row-gap: 22px; padding: 32px 24px 28px; }
  .steam-membership-panel--spacing-v1 .steam-membership-panel__side { min-height: 0; }
  .steam-membership-panel--spacing-v1 .steam-membership-panel__media { min-height: 320px; height: 320px; }
}

@media (max-width: 560px) {
  .steam-membership-panel--spacing-v1 { width: min(100% - 24px, 1160px); row-gap: 18px; padding: 22px; }
  .steam-membership-panel--spacing-v1 .steam-membership-panel__media { min-height: 260px; height: 260px; }
  .steam-membership-panel--spacing-v1 .steam-membership-panel__plans article { padding: 22px; }
}

.steam-membership-panel--days-v4 { grid-template-areas: "content side" "plans side"; grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr); column-gap: 42px; row-gap: 24px; align-items: stretch; padding: 36px; }
.steam-membership-panel--days-v4 .steam-membership-panel__content { grid-area: content; }
.steam-membership-panel--days-v4 .steam-membership-panel__side { grid-area: side; min-height: 100%; }
.steam-membership-panel--days-v4 .steam-membership-panel__media { min-height: 0; height: 100%; }
.steam-membership-panel--days-v4 .steam-membership-panel__plans { grid-area: plans; grid-column: auto; grid-template-columns: 1fr; align-self: end; gap: 10px; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.steam-membership-panel--days-v4 .steam-membership-panel__plans article { min-height: 0; gap: 10px; padding: 0 0 18px; overflow: hidden; border: 1px solid rgba(5, 11, 29, 0.08); border-radius: 18px; background: #fff; }
.steam-membership-panel--days-v4 .steam-membership-panel__plans article.is-featured { background: #fff; }
.steam-membership-panel--days-v4 .steam-membership-panel__hook { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--bp-dark); color: #fff; }
.steam-membership-panel--days-v4 .is-featured .steam-membership-panel__hook { background: #c9f8ff; color: var(--bp-ink); }
.steam-membership-panel--days-v4 .steam-membership-panel__hook h3,
.steam-membership-panel--days-v4 .steam-membership-panel__hook strong { color: inherit; }
.steam-membership-panel--days-v4 .steam-membership-panel__hook h3 { min-width: 0; white-space: nowrap; font-size: clamp(22px, 2vw, 29px); line-height: 0.95; }
.steam-membership-panel--days-v4 .steam-membership-panel__hook strong { flex: 0 0 auto; font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.steam-membership-panel--days-v4 .steam-membership-panel__plans span,
.steam-membership-panel--days-v4 .steam-membership-panel__plans p { margin-inline: 20px; }

@media (max-width: 820px) {
  .steam-membership-panel--days-v4 { grid-template-areas: "content" "side" "plans"; grid-template-columns: 1fr; padding: 32px 24px 28px; }
  .steam-membership-panel--days-v4 .steam-membership-panel__side { min-height: 0; }
  .steam-membership-panel--days-v4 .steam-membership-panel__media { min-height: 320px; height: 320px; }
}

@media (max-width: 560px) {
  .steam-membership-panel--days-v4 { width: min(100% - 24px, 1160px); row-gap: 18px; padding: 22px; }
  .steam-membership-panel--days-v4 .steam-membership-panel__media { min-height: 260px; height: 260px; }
  .steam-membership-panel--days-v4 .steam-membership-panel__hook { align-items: flex-end; }
  .steam-membership-panel--days-v4 .steam-membership-panel__hook h3 { white-space: normal; font-size: 25px; }
}