@media (max-width: 768px) {
    .messages-menu {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        

        .message-card {
            display: flex;
            flex-direction: row;
            
            width: calc(100% - 2em);
            padding: 1em;
            gap: 1em;

            background-color: #21212c;
            transition: background-color 150ms ease;

            .img-container {
                width: 4em;
                height: 4em;
                flex: 0 0 auto;
                overflow: hidden;
                border-radius: 50%;
                background-color: #252c36;
            }
            img {
                width: 4em;
                height: 4em;
            }

            .details {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: .3em;
                width: calc(100% - 5em);
            }

            .details .contact-name {
                font-weight: 900;
            }

            .details .message-peek {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .details .message-peek.no-messages {
                color: #9ba4b4;
                font-style: italic;
            }

            &:hover:active {
                background-color: #2c333e;
            }
        }

        .message-card {
            border-bottom: #2c333e solid 2px;
        }
    }
}