.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: minmax(0, 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: minmax(0, 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;
  }
}