/* Обкладинка лежить поверх корінця-заглушки: поки файл вантажиться чи якщо його немає,
   видно корінець із першою літерою назви. */
.c-cover {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-s);
  background: var(--spine);
  box-shadow: 0 1px 3px var(--color-shadow);
  color: var(--color-on-spine);
}

/* Тонка смуга біля корінця, як на палітурці. */
.c-cover::before {
  position: absolute;
  inset: 0 auto 0 8%;
  width: 2px;
  background: rgb(255 255 255 / 14%);
  content: "";
}

.c-cover__initial {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
}

.c-cover__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-cover--s {
  width: 44px;
  font-size: var(--font-size-l);
}

.c-cover--m {
  width: 100%;
  font-size: var(--font-size-xxl);
}

.c-cover--l {
  width: 132px;
  border-radius: var(--radius-m);
  box-shadow: 0 8px 24px var(--color-shadow);
  font-size: 48px;
}

.c-cover--tint-0 { --spine: var(--spine-0); }
.c-cover--tint-1 { --spine: var(--spine-1); }
.c-cover--tint-2 { --spine: var(--spine-2); }
.c-cover--tint-3 { --spine: var(--spine-3); }
.c-cover--tint-4 { --spine: var(--spine-4); }
.c-cover--tint-5 { --spine: var(--spine-5); }