@media (max-width: 768px) {
    .profile-menu {
        display: flex;
        flex-direction: column;

        & > div {
            padding: 1em;
            margin: 2em 2em 0 2em;

            background-color: #252c36;
            border-radius: 2.5em;
        }

        .profile-card {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1em;
            
            .img-wrapper {
                position: relative;
                width: 5em;
                height: 5em;
                border-radius: 50%;
                background-color: #2c333e;
                overflow: hidden;
                flex: 0 0 auto;

                img {
                    width: 5em;
                    height: 5em;
                }
            }

            .img-wrapper::after {
                content: "";
                position: absolute;
                inset: 0;
                background: url("/images/camera.svg") center/contain no-repeat;
                filter: invert();
                background-color: #0004;
                opacity: 0;
                pointer-events: none;
                transition: opacity 100ms ease;
            }
            .img-wrapper:hover::after {
                opacity: 1;
            }

            .details {
                justify-content: center;
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: .2em;
            }

            .details p {
                margin: 0;
                padding: 0;
                font-size: larger;

                &.display-name {
                    font-weight: 900;
                }

                &.username {
                    color: #9ba4b4;
                }

                &.username::before {
                    content: "@";
                }
            }

            .logout {
                width: 4em;
                height: 4em;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                background-color: #252c36;
                flex: 0 0 auto;
                padding: 2.5em;
                border-radius: 2em;

                img {
                    width: 4em;
                    height: 4em;
                    filter: invert();
                }

                &:hover {
                    background-color: #3c4656;
                }
            }
        }

        .personal-details {
            display: flex;
            flex-direction: column;
            gap: .5em;

            .personal-detail {
                position: relative;
                p {
                    margin: .5em;
                }
                p.type {
                    text-transform: capitalize;
                    color: #9ba4b4;
                }
                button {
                    display: none;
                    position: absolute;
                    right: 1em;
                    border: none;
                    color: #fff;
                    padding: .5em;
                    width: 3em;
                    height: 3em;
                    top: calc(50% - 1.75em); /* ??? */
                    border-radius: 1em;
                    background-color: #252c36;
                    transition: background-color 150ms ease;
                }

                button:hover {
                    background-color: #3c4656;
                }

                &.editable button {
                    display: block;
                }
            }

            .personal-detail:not(:last-child) {
                border-bottom: solid 2px #3c4656;
                padding-bottom: .5em;
            }
        }

        .security {
            .security-entry {
                color: #9ba4b4;
                padding: 0 1em;
                font-size: 1em;
                display: flex;
                flex-direction: row;
                align-items: center;

                .name {
                    width: 100%;
                }

                .actions button {
                    background-color: inherit;
                    color: #e83333;
                    white-space: nowrap;
                    padding: .6em;
                    border-radius: .5em;
                    cursor: pointer;
                    font-size: 1em;

                    &:hover {
                        background-color: #3c4656;
                    }
                }
            }

            .security-entry:not(:last-child) {
                border-bottom: solid 2px #3c4656;
                padding-bottom: .5em;
            }
        }
    }
}