/* ============================================
   PROFILE VISUALS
============================================ */

.menu-items {
    list-style: none;
    padding: 0;
}

.profile-img-settings {
    display: block;
    height: 12em;
    border-radius: .5rem;
    border: 1px solid var(--mp-blue, blue);
}

.profile {
    position: relative;
    border-radius: 5vw;
    max-height: 40rem;
    max-width: 40rem;
}

.profile .profile-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 80vw;
    max-height: 35rem;
    transform: translateX(-50%);
}

.profile .dots-1,
.profile .dots-2,
.profile .dots-3,
.profile .dots-4 {
    position: absolute;
    width: 3vw;
}

.profile .dots-1 { right: 1.5vw; top: .5vw; }
.profile .dots-2 { right: -4vw; top: -.5vw; }
.profile .dots-3 { left: 1.5vw; bottom: .5vw; }
.profile .dots-4 { left: -4vw; bottom: -.5vw; }

.profile .dots-1 svg,
.profile .dots-3 svg {
    fill: #fff;
}

.profile .dots-2 svg,
.profile .dots-4 svg {
    fill: #1e30f3;
}

@media (min-width: 576px) {
    .profile .profile-img { height: 65vw; }
}

@media (min-width: 768px) {
    .profile .profile-img { height: 55vw; }
}

@media (min-width: 992px) {
    .profile .profile-img { height: 45vw; }

    .profile .dots-1,
    .profile .dots-2,
    .profile .dots-3,
    .profile .dots-4 {
        width: 1.5vw;
    }

    .profile .dots-1 { right: .75vw; }
    .profile .dots-2 { right: -2vw; }
    .profile .dots-3 { left: .75vw; }
    .profile .dots-4 { left: -2vw; }
}

@media (min-width: 1200px) {
    .profile {
        width: 30em;
    }

    .profile .profile-img {
        height: 40vw;
    }
}