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

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

  & 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: 300ms;
  }

  a {
    display: flex;
  }

  & a:hover img,
  & a:focus 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;
    }

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

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

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

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

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

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

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

  & .book-display {
    display: flex;
    flex-direction: row;
    gap: var(--sizing-base);
    margin-bottom: var(--sizing-base);
  }

  p {
    margin: var(--sizing-base) 0;
  }

  & .book-meta p {
    margin: 0;
  }
}

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

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

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