/* 横幅と余白を整えるレイアウト定義 */
.container {
  width: min(calc(100% - (var(--padding-mobile) * 2)), var(--container-width));
  margin-inline: auto;
}

.content {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.content-narrow {
  width: min(100%, var(--copy-width));
  margin-inline: auto;
}

section {
  padding-block: var(--section-space);
}

.section-intro {
  margin-bottom: 56px;
}

.section-intro.is-centered {
  text-align: center;
}

.section-intro p {
  margin-top: 24px;
  color: var(--color-gray);
}

.section-intro.is-centered p {
  margin-inline: auto;
}

.stack {
  display: grid;
  gap: 24px;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.grid-3,
.grid-4 {
  display: grid;
  gap: 24px;
  align-items: stretch;
}

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

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