@layer components {
    .media {
        display: flex;
        align-items: flex-start;
        gap: var(--space-md);
        margin-block-end: var(--margin-md);
    }

    .media--reverse {
        flex-direction: row-reverse;
    }

    .media__image {
        flex-shrink: 0;
        inline-size: 9rem;
        block-size: 10rem;
        border-radius: var(--radius-sm);
        object-fit: cover; /* Ensures image fills the space without distortion */
    }

    .media__body {
        flex-grow: 1;
        /* Reset margins on the first element inside the body to prevent alignment issues */
        & > :first-child {
            margin-block-start: var(--margin-none);
        }
    }
}