@layer common {
    .message-component.info {
        margin-top: 2rem;
        padding: 0.8rem;
        border: 1px solid var(--primary-border-color);
        border-radius: .5rem;
        background-color: var(--primary-background-color);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.2rem;
        margin-top: 4rem;
        margin-bottom: 4rem;

        @media screen and (min-width: 992px) {
            width: 50%;
        }

        .site-icon {
            background-color: var(--primary-color);
            width: 2rem;
            height: 2rem;
            margin-bottom: 0.5rem;
        }

        .header {
            font-size: 1.2rem;
            color: var(--primary-color);
        }

        .text {
            font-size: .9rem;
            color: #676E70;
        }
    }
}