@layer components {
    .content-about {
        display: grid;
        gap: var(--space-28);
        margin-block: var(--space-28);
        padding: var(--space-28);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface);
        box-shadow: 0 1.25rem 3rem var(--color-shadow-soft);
    }

    .content-about__main {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: var(--space-28);
        align-items: start;
        min-width: 0;
    }

    .content-about--compact .content-about__main {
        align-items: center;
    }

    .content-about__avatar-link,
    .content-about__avatar {
        display: block;
        width: 7rem;
        height: 7rem;
        border-radius: var(--radius-round);
    }

    .content-about__avatar {
        overflow: hidden;
        background-color: var(--color-bg-surface-alt);
        box-shadow: 0 0.875rem 1.75rem var(--color-shadow-medium);
    }

    .content-about__avatar .author {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: perspective(1px) scale3d(1, 1, 1);
        transition: transform 250ms ease-in-out;
    }

    .content-about__avatar-link:hover .author,
    .content-about__avatar-link:focus-visible .author {
        transform: perspective(1px) scale3d(1.04, 1.04, 1.04);
    }

    .content-about__copy {
        display: grid;
        gap: var(--space-16);
        min-width: 0;
    }

    .content-about__heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-12);
        min-width: 0;
    }

    .content-about__name {
        font-size: var(--text-xl);
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
    }

    .content-about__role {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        padding: 0 var(--space-14);
        border-radius: var(--radius-round);
        background: color-mix(in srgb, var(--color-brand-primary) 20%, var(--color-bg-surface));
        color: color-mix(in srgb, var(--color-text) 80%, var(--color-brand-primary));
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
    }

    .content-about__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-14);
        color: var(--color-text-muted);
    }

    .content-about__metric {
        display: inline-flex;
        align-items: center;
        gap: var(--space-8);
        min-width: 0;
    }

    .content-about__metric-icon {
        position: static;
        display: block;
        flex: 0 0 1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        overflow: visible;
        fill: currentColor;
    }

    .content-about__metric-icon--score {
        color: var(--color-brand-primary);
    }

    .content-about__divider {
        width: 0.25rem;
        height: 0.25rem;
        border-radius: var(--radius-round);
        background: currentColor;
        opacity: 0.55;
    }

    .content-about__joiner {
        color: var(--color-text-muted);
        font-weight: var(--font-weight-bold);
    }

    .content-about__bio {
        max-width: 72rem;
        margin: var(--space-8) 0 0;
        color: var(--color-text);
        line-height: var(--leading-loose);
    }

    .content-about__more {
        display: grid;
        gap: var(--space-18);
        min-width: 0;
        padding-top: var(--space-28);
        border-top: var(--border-width-hairline) solid var(--color-border);
    }

    .content-about__more-title {
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
    }

    .content-about__reviews {
        display: grid;
        list-style: none;
    }

    .content-about__review {
        border-bottom: var(--border-width-hairline) solid var(--color-border);
    }

    .content-about__review-link {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr) 1rem;
        align-items: center;
        gap: var(--space-18);
        min-width: 0;
        min-height: 3.875rem;
        color: var(--color-text);
        font-weight: var(--font-weight-regular);
        line-height: var(--leading-normal);
        text-decoration: none;
    }

    .content-about__review-title {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .content-about__review-link:hover .content-about__review-title,
    .content-about__review-link:focus-visible .content-about__review-title {
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .content-about__review-icon,
    .content-about__review-chevron,
    .content-about__profile-icon {
        position: static;
        display: block;
        overflow: visible;
        fill: currentColor;
    }

    .content-about__review-icon {
        flex: 0 0 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
        color: var(--color-text);
    }

    .content-about__review-chevron {
        justify-self: end;
        flex: 0 0 0.875rem;
        width: 0.875rem;
        height: 0.875rem;
        color: var(--color-text-muted);
    }

    .content-about__profile-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-6);
        width: 100%;
        min-height: 2.5rem;
        padding: 0 var(--space-20);
        border-radius: var(--radius-corner);
        background: color-mix(in srgb, var(--color-bg-surface-alt) 80%, var(--color-bg-surface));
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
        transition: background-color .2s ease, transform .2s ease;
    }

    .content-about__profile-link:hover,
    .content-about__profile-link:focus-visible {
        background: color-mix(in srgb, var(--color-brand-primary) 12%, var(--color-bg-surface-alt));
        transform: translateY(-1px);
    }

    .content-about__profile-icon {
        flex: 0 0 1.125rem;
        width: 1rem;
        height: 1rem;
    }

    @media (min-width: 64rem) {
        .content-about {
            padding: var(--space-48);
        }

        .content-about__main {
            grid-template-columns: 8rem minmax(0, 1fr);
            gap: var(--space-40);
        }

        .content-about__avatar-link,
        .content-about__avatar {
            width: 7.5rem;
            height: 7.5rem;
        }
    }

    @media (max-width: 47.9375rem) {
        .content-about {
            gap: var(--space-20);
            margin-block: var(--space-20);
            padding: var(--space-18);
            border-radius: var(--radius-corner);
        }

        .content-about__main {
            grid-template-columns: 4.5rem minmax(0, 1fr);
            gap: var(--space-14);
        }

        .content-about__avatar-link,
        .content-about__avatar {
            width: 4.5rem;
            height: 4.5rem;
        }

        .content-about__role {
            min-height: 1.5rem;
            padding-inline: var(--space-8);
        }

        .content-about__bio {
            line-height: var(--leading-relaxed);
        }

        .content-about__more {
            gap: var(--space-14);
            padding-top: var(--space-18);
        }

        .content-about__review-link {
            grid-template-columns: 1.25rem minmax(0, 1fr) 0.875rem;
            gap: var(--space-12);
            min-height: 3.25rem;
        }

        .content-about__profile-link {
            min-height: 3.25rem;
        }
    }

    @media (max-width: 35rem) {
        .content-about__main {
            grid-template-columns: 1fr;
        }

        .content-about__avatar-link,
        .content-about__avatar {
            width: 4rem;
            height: 4rem;
        }
    }
}