@layer common {
    .message-box {
        display: grid;
        grid-template-columns: max-content auto;
        column-gap: 1rem;
        row-gap: .5rem;

        @media screen and (min-width: 992px) {
            grid-template-columns: max-content max-content;
        }

        img.avatar {
            width: 4rem;
            border-radius: 5rem;
            align-self: end;
        }

        .content {
            border: 2px solid var(--primary-border-color);
            padding: .5rem 0.8rem;
            padding-bottom: 0;
            border-radius: 0.5rem;
            border-bottom-left-radius: 0;

            p {
                color: var(--text-color);
                font-style: italic;
                font-size: 1rem;
                margin: .1rem 0;

                &:first-child {
                    margin-top: 0;
                }

                &.sub-info {
                    margin-top: 0.5rem;
                    font-size: .8rem;
                    color: var(--neutral-color);
                    font-style: normal;
                }
            }
        }

        .social {
            grid-column: 2 / 3;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 1rem;

            .site-icon {
                --site-icon-size: 2.5rem;
            }
        }
    }
}