.themes {
  display: grid;
  row-gap: var(--row-gap-1);
  -moz-column-gap: var(--margin);
       column-gap: var(--margin);
  grid-template-columns: 0 minmax(0, var(--max-width)) 0;
  justify-content: space-between;
  padding-top: var(--row-gap-2);
  padding-bottom: var(--row-gap-2);
  align-self: start;
}

.themes > * {
    grid-column: 2;
  }

.themes-header {
  max-width: 600px;
  margin: 0 auto;
}

.themes-header h1 {
    font: var(--text-display);
    letter-spacing: var(--text-display-spacing);
    text-align: center;
    margin: 0;
  }

.themes-header p {
    font: var(--text-body);
    letter-spacing: var(--text-body-spacing);
    color: var(--color-foreground-1);
    text-align: center;
    text-wrap: balance;
  }

.themes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 280px);
  -moz-column-gap: var(--column-gap-1);
       column-gap: var(--column-gap-1);
  row-gap: var(--row-gap-2);
  justify-content: center;
}