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

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

  &: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: border-color var(--transition-duration-default) var(--transition-ease-in-out);
  }

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

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

    @media screen and (min-width: 768px) {
      align-items: start;
    }

    & p {
      margin: 0;
    }

    & .description {
      @media screen and (min-width: 768px) {
        margin-bottom: var(--spacing-base);
      }
    }

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

      @media screen and (min-width: 768px) {
        margin-top: 0;
        max-width: 50%;
      }
    }
  }
}

.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-md);
    }

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

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

    & p {
      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);

    @media screen and (min-width: 768px) {
      flex-direction: row;
      align-items: start;
    }

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

      @media screen and (min-width: 768px) {
        width: auto;
        align-items: start;
      }

      & p {
        margin: 0;
      }

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

        @media screen and (min-width: 768px) {
          max-width: none;
        }
      }
    }
  }
}