@layer component {
  .book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 1fr auto;
    gap: 16px var(--vertical-padding, 16px);
    list-style: none;
    padding: 0;

    .book-grid__book {
      background-color: var(--card-bg-color);
      border-radius: 12px;
      border: 1px solid var(--card-border-color);
      padding: 14px 10px;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      position: relative;
      isolation: isolate;
      margin-block-start: 8px;
      transition: 150ms ease-in-out;
      transition-property: background-color, border-color;

      &:hover {
        background-color: var(--card-bg-color-hover);
        border-color: var(--card-border-color-hover);
      }

      &:hover .book-grid__cover-image {
        filter: brightness(105%);
      }

      /* &:hover .book-grid__book-title {
        text-decoration: 1px underline;
      } */
    }

    .book-grid__image-wrapper {
      place-self: center;
      height: calc(160 / 16 * 1rem);
    }

    .book-grid__cover-image {
      height: 100%;
      width: auto;
      will-change: filter;
      filter: brightness(97%);
      transition: 150ms ease-in-out;
      transition-property: filter;
      border-radius: 2px;
    }

    .book-grid__book-body {
      text-align: center;
    }

    .book-grid__book-title {
      font-size: var(--font-size-book-title);
      margin-block-end: 8px;
      font-weight: 600;
      text-underline-offset: 3px;
    }

    .book-grid__book-author {
      font-size: var(--font-size-book-author);
      color: var(--c-gray-medium);
      font-weight: 400;
      /* letter-spacing: 0.02em; */
    }

    .book-grid__remove {
      position: absolute;
      z-index: 2;
      padding: 0;
      display: grid;
      place-content: center;
      top: -6px;
      right: -6px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, 0.7);
      color: var(--c-white);
      cursor: pointer;
      transition:
        color 150ms ease-in-out,
        background 50ms ease-in-out;
      /* transition-property: color, background; */

      &:hover {
        /* color: var(--c-magenta);
        background: rgba(0, 0, 0, 0.1); */
        opacity: 0.8;
      }

      &:focus-visible {
        outline: 2px solid AccentColor;
        outline-offset: 1px;
      }
    }

    .book-grid__remove svg {
      pointer-events: none;
    }
  }
}