/* LAYOUT DER HAUPT REVIEWS SEITE */


.primary-navigation {
  margin-block-end: 30px;
}

.review-main-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 4fr 1fr;
}


/* SEITENLEISTE */

.seitenleiste {
  position: sticky;
  top: 20px;
  align-self: start; /* Der Standard für Flex-Boxen wäre hier stretch, was dazu führt, dass es bis ans Ende der Seite ausgedehnt wird. Somit würde es nicht mit sticky mitgenommen werden, da man nie das Ende der Box erreicht - das wird mit align-self: start geändert, das die Box nun nurnoch bis an das Ende des Contents geht */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.seitenleiste p {
  margin: 5px;
}

.seitenleiste h2 {
  margin-block-start: 0;
}

.horizontal-scroll ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 15px;
  margin-inline: auto;

  gap: 30px;
  overflow-x: scroll;
}



/* HORIZONTAL SCROLLBARE FENSTER MIT GAME EINTRÄGEN */

.horizontal-scroll li {
  flex-shrink: 0;
  flex-basis: 200px;

  height: 180px; /* Temporäre Lösung dafür, dass manche Boxen länger sind als andere, wenn der Titel zu lang ist */

  padding-block: 10px;
  padding-inline-start: 20px;
  background-color: #a075e9;
  color:#201928;
  border: 5px solid #41374b;
  border-radius: 15px;
}

.horizontal-scroll a {
  color:#201928;
}

.horizontal-scroll h2 {
  margin-block-start: 60px;
}

/* Ich würde gerne die Spiele, zu denen ich keine Review habe, ausgrauen/hell blau machen, aber da man scheinbar keine Class direkt auf List Items anwenden kann, könnte sich das schwierig werden */
.no-review li {
  /* flex-shrink: 0;
  flex-basis: 200px;

  padding-block: 10px;
  padding-inline-start: 20px; */
  background-color: #acb0f6;
}