@layer components {
    .card {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: var(--radius-l);
        background: var(--paper);
        overflow: hidden;
        text-decoration: none;
        color: var(--soil);
        transition: translate 240ms, box-shadow 240ms;
    }

    .card:hover {
        translate: 0 -2px;
        box-shadow: var(--shadow-2);
    }

    .card:hover .chip-category {
        background: var(--sky);
        color: var(--paper);
    }

    .card-media {
        aspect-ratio: 16 / 9;
        background: var(--haze);
        overflow: hidden;
    }

    .card-media img,
    .card-media svg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-body {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-4);
    }

    .card-title {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
        color: var(--fog);
        font-size: var(--size-small);
    }

    .card-footer {
        margin-block-start: auto;
        padding: var(--space-3) var(--space-4);
        border-block-start: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-2);
    }
}

@layer components {
    .review-owner-reply {
        margin-block-start: var(--space-3);
        padding-inline-start: var(--space-3);
        border-inline-start: 3px solid var(--sky);
        display: grid;
        gap: var(--space-1);
    }
}