.home .settings #players {
  font-size: 14px;
  line-height: 1.4;
}

@media (orientation: landscape), (min-width: 901px) {
  .home {
    grid-template-columns: minmax(300px, 368px) minmax(390px, 430px);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    column-gap: 14px;
  }

  .home h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0;
  }

  .home .hero.original-cards {
    grid-column: 1;
    grid-row: 2 / 5;
    align-self: center;
    width: 100%;
    margin: 0;
  }

  .home .settings {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    margin: 0 0 8px;
    align-content: center;
  }

  .home > .resume { grid-column: 2; grid-row: 3; }
  .home > .primary { grid-column: 2; grid-row: 4; }
  .home > .multiplayer-entry { grid-column: 2; grid-row: 5; }
  .home .home-links { grid-column: 1; grid-row: 5; align-self: end; justify-self: start; }
  .home .mode-note { display: none; }
}

html.phone-preview .home {
  grid-template-columns: 368px 430px;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

html.phone-preview .home h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin: 0;
}

html.phone-preview .home .hero.original-cards {
  grid-column: 1;
  grid-row: 2 / 5;
  align-self: center;
  height: 190px;
}

html.phone-preview .home .settings {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  align-content: center;
  margin: 0 0 8px;
}

html.phone-preview .home > .resume { grid-column: 2; grid-row: 3; }
html.phone-preview .home > .primary { grid-column: 2; grid-row: 4; }
html.phone-preview .home > .multiplayer-entry { grid-column: 2; grid-row: 5; }
html.phone-preview .home .home-links { grid-column: 1; grid-row: 5; align-self: end; justify-self: start; }

@media (orientation: landscape), (min-width: 901px) {
  .home .settings {
    grid-template-columns: 1.15fr .9fr 1.15fr;
    grid-template-rows: auto auto;
  }
  .home .id-setting { grid-column: 1; grid-row: 1; }
  .home .players-setting { grid-column: 2; grid-row: 1; }
  .home .language-setting { grid-column: 3; grid-row: 1; }
  .home .category-setting { grid-column: 1; grid-row: 2; }
  .home .level-setting { grid-column: 2; grid-row: 2; }
  .home .settings .colors {
    grid-column: 3;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .home .settings .colors label {
    grid-column: 1 / -1;
    margin: 0;
  }
  .home .settings .color-pick {
    width: 25px;
    height: 25px;
  }
}

html.phone-preview .home .settings {
  grid-template-columns: 1.15fr .9fr 1.15fr;
  grid-template-rows: auto auto;
}
html.phone-preview .home .settings .colors {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, 25px);
  gap: 5px;
  align-content: start;
}
html.phone-preview .home .settings .colors label {
  grid-column: 1 / -1;
  margin: 0;
}
html.phone-preview .home .settings .color-pick {
  width: 25px;
  height: 25px;
}
