.st-library{
  padding:48px 0 32px;
  overflow:hidden;
}

.st-library .st-sec-head{ margin-bottom:28px; }

.st-lib-bar{
  position:relative;
  overflow:hidden;
  margin-top:8px;
}

.st-lib-bar::before,
.st-lib-bar::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}

.st-lib-bar::before{
  left:0;
  background:linear-gradient(90deg, var(--st-page), transparent);
}

.st-lib-bar::after{
  right:0;
  background:linear-gradient(270deg, var(--st-page), transparent);
}

.lib-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:lib-scroll 60s linear infinite;
}

.lib-set{
  display:flex;
  gap:40px;
  padding-right:40px;
  flex:none;
}

.book{
  flex:none;
  width:200px;
  height:296px;
  border-radius:4px 10px 10px 4px;
  overflow:hidden;
  position:relative;
  background:var(--st-elevated);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.04);
}

.book img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Blank covers: mostly the void, with a tree or a sun turning up where it feels like it. */
.book-ph{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px 18px;
  background:linear-gradient(165deg, #1a1e2a, #0c0e14);
}

.lib-set .book:nth-child(2n) .book-ph{ background:linear-gradient(165deg, #141820, #090b10); }
.lib-set .book:nth-child(3n) .book-ph{ background:linear-gradient(165deg, #1a3328, #0e1412); }
.lib-set .book:nth-child(4n) .book-ph{ background:linear-gradient(165deg, #2a2418, #12100c); }
.lib-set .book:nth-child(5n) .book-ph{ background:linear-gradient(165deg, #243044, #10131c); }

.book-ph span{
  font-family:var(--st-serif);
  font-size:19px;
  line-height:1.25;
  color:color-mix(in srgb, var(--st-text) 82%, transparent);
}

@media (max-width:600px){
  .lib-set{ gap:20px; padding-right:20px; }
  .book{ width:140px; height:208px; }
  .book-ph{ padding:14px 12px; }
  .book-ph span{ font-size:15px; }
  .st-lib-bar::before,
  .st-lib-bar::after{ width:48px; }
}

@keyframes lib-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion:reduce){
  .lib-track{ animation:none; }
}
