.book-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);

  &:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;

    & .book-meta .description {
      margin-bottom: 0;
    }
  }

  & a:has(img) {
    display: flex;
  }

  & img {
    max-width: calc(var(--sizing-3xl) * 4);
    height: auto;
    aspect-ratio: var(--aspect-ratio-vertical);
    transition-property: border-color;
    transition-timing-function: var(--transition-ease-in-out);
    transition-duration: var(--transition-duration-default);
  }

  & a:focus img,
  & a:focus-within img {
    border: 0
  }

  & a:hover img,
  & a:active img {
    border-color: var(--accent-color-hover)
  }

  & .book-meta {
    align-items: center;

    & p {
      margin: 0;
      overflow: hidden;
      max-width: 100%;
      text-overflow: ellipsis;
      width: fit-content;
    }

    & .progress-bar-wrapper {
      max-width: 75%;
      margin-bottom: 0;
    }
  }
}

.book-entry,
.book-focus {
  & img {
    border: var(--border-default);
    border-radius: var(--border-radius-slight);
  }

  & .book-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

    & p {
      &.title {
        font-size: var(--font-size-xl);
        line-height: var(--line-height-reduced);
      }

      &.sub-meta {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-sm);

        & svg {
          width: var(--sizing-svg-sm);
          height: var(--sizing-svg-sm);
        }
      }

      &.title,
      &.sub-meta {
        margin: 0;
      }
    }
  }
}

.book-focus {
  margin-top: var(--spacing-base);
  border-bottom: 0;

  & .book-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-base);
    margin-bottom: var(--spacing-base);

    & .book-meta {
      width: 100%;
      align-items: center;

      & p {
        margin: 0;
      }

      & .progress-bar-wrapper {
        max-width: 50%;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .book-entry {
    flex-direction: row;
    gap: var(--spacing-base);
    align-items: start;

    & .book-meta {
      align-items: start;

      & .progress-bar-wrapper {
        margin-top: 0;
        max-width: 50%;
      }

      & .description {
        margin-bottom: var(--spacing-base);
      }
    }
  }

  .book-focus .book-display {
    flex-direction: row;
    align-items: start;

    & .book-meta {
      width: auto;
      align-items: start;

      & .progress-bar-wrapper {
        max-width: none;
      }
    }
  }
}