.poster {
  width: 100%;
  max-width: 300px;
}

@media(max-width: var(--grid-breakpoints-sm)) {
  .poster {
    display: none;
  }
}

@media(max-width: var(--grid-breakpoints-sm)) {
  .read-btn--text {
    display: none;
  }
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 158px);
  grid-gap: 0.5rem;
  justify-content: space-around;
}


.virtual-scroller, virtual-scroller {
  width: 100%;
  height: calc(100vh - 85px);
  max-height: calc(var(--vh)*100 - 170px);
}

// This is responsible for ensuring we scroll down and only tabs and companion bar is visible
.main-container {
  // Height set dynamically by  get ScrollingBlockHeight()
  overflow-y: auto;
  position: relative;
  overscroll-behavior-y: none;
}

h2 {
  margin-bottom: 0;
  word-break: break-all;
}
