.cc-container {
  width: min(var(--cc-container-public), calc(100% - (var(--cc-container-pad-desktop) * 2)));
  margin-inline: auto;
}

.cc-container--game {
  width: min(var(--cc-container-game), calc(100% - (var(--cc-container-pad-desktop) * 2)));
}

.cc-container--store {
  width: min(var(--cc-container-store), calc(100% - (var(--cc-container-pad-desktop) * 2)));
}

.cc-section {
  padding-block: clamp(56px, 7vw, 96px);
}

.cc-section--tight {
  padding-block: clamp(36px, 5vw, 64px);
}

.cc-section__head {
  max-width: 820px;
  margin-block-end: var(--cc-space-7);
}

.cc-section__head h2 {
  margin: 0;
  color: var(--cc-text);
  font-size: var(--cc-type-h2);
  line-height: 1.12;
}

.cc-section__head p {
  margin: 12px 0 0;
  color: var(--cc-text-soft);
  font-size: var(--cc-type-body-lg);
  line-height: 1.8;
}

.cc-grid {
  display: grid;
  gap: var(--cc-space-6);
}

.cc-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cc-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cc-stack {
  display: grid;
  gap: var(--cc-space-5);
}

.cc-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
  align-items: center;
}

.cc-type-display-1 {
  font-size: var(--cc-type-display-1);
  line-height: 1.05;
}

.cc-type-display-2 {
  font-size: var(--cc-type-display-2);
  line-height: 1.1;
}

.cc-muted {
  color: var(--cc-text-soft);
}

@media (max-width: 900px) {
  .cc-container,
  .cc-container--game,
  .cc-container--store {
    width: min(100% - (var(--cc-container-pad-tablet) * 2), var(--cc-container-public));
  }

  .cc-grid--3,
  .cc-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cc-container,
  .cc-container--game,
  .cc-container--store {
    width: min(100% - (var(--cc-container-pad-mobile) * 2), var(--cc-container-public));
  }

  .cc-grid--2,
  .cc-grid--3,
  .cc-grid--4 {
    grid-template-columns: 1fr;
  }
}