@layer components {
    .book-card {
        max-width: min(380px, 80vw);
        height: 170px;
        flex: 0 0 auto;
        display: flex;
        align-items: start;
        gap: var(--spacing-6);
        padding: var(--spacing-4) var(--spacing-5);
        border-radius: var(--radius-lg);
        background: var(--color-background);
        border: 1px solid var(--color-border);
        color: var(--color-text);
        transition:
            transform var(--duration-base) var(--ease-standard),
            box-shadow var(--duration-base) var(--ease-standard);
    }

    .book-card:hover,
    .book-card:focus-visible {
        transform: translateY(calc(var(--spacing-2) * -1));
        box-shadow: var(--shadow-md);
        color: var(--color-text);

        text-decoration: none;

        .book-card-text h3 {
            color: var(--color-primary);
        }
    }

    .book-card-image-wrapper {
        flex: 0 0 auto;
        align-self: center;
        width: 150px;
        height: 220px;
        margin-block: calc(var(--spacing-12) * -1);
        margin-inline-start: calc(var(--spacing-12) * -1);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
        background: var(--color-surface-2);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .book-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .book-card-text {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
        min-width: 0;
        overflow: hidden;
    }

    .book-card-author {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-sm);
        font-style: italic;
        color: var(--color-text-secondary);
        margin: 0;
        min-width: 0;
    }

    .book-card-author-avatars {
        display: inline-flex;
        flex-shrink: 0;
    }

    .book-card-author-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid var(--color-background);
        background: var(--color-surface);
    }

    .book-card-author-avatar + .book-card-author-avatar {
        margin-left: -8px;
    }

    .book-card-author-names {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .book-card-title {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        transform: color var(--duration-base);
        margin: 0;
    }

    .book-card-tagline {
        color: var(--color-text-secondary);
        margin: 0;
        font-size: var(--font-size-sm);
        line-height: var(--line-height-tight);
    }
}