:root {

  --poster-width: 10rem;
  --posters-wide: 10;
}

#root {
  height: 100%;
  width: 100%;
}

main {
  display: flex;
  justify-content: center;

  height: 100%;
  background-size: cover;

}

h1 {
  margin: 0;
}

.flow-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-basis: calc(var(--poster-width)*var(--posters-wide));
}

#sidebar {
  flex: 0 0 10rem;
}

.poster {
  font-size: 2rem;
  background-size: cover;
  width: var(--poster-width);
  aspect-ratio: 3/4.5;
  flex: 0 0 auto;
}



.overlay {
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  cursor: pointer;
}

.overlay:hover {
  opacity: 1;
}