.profile-window {
    position: absolute;
    top: 92px;
    left: 930px;

    width: 420px;
    max-width: calc(100vw - 40px);
}

.profile-content {
    padding: 12px;
    background-color: var(--win-gray);
}

.profile-photo-frame {
    width: 100%;
    height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: linear-gradient(
        to bottom,
        #d321c5,
        #ff6a35,
        #ffd25a,
        #d74abf
    );

    border-top: 3px solid var(--win-dark);
    border-left: 3px solid var(--win-dark);
    border-right: 3px solid var(--win-light);
    border-bottom: 3px solid var(--win-light);
}

.profile-photo-frame img {
    width: 240px;
    height: 240px;

    object-fit: cover;

    border-top: 3px solid var(--win-light);
    border-left: 3px solid var(--win-light);
    border-right: 3px solid var(--win-dark);
    border-bottom: 3px solid var(--win-dark);
}

@media (max-width: 1200px) {
    .profile-window {
        left: 720px;
        width: 360px;
    }
}

@media (max-width: 768px) {
    .profile-window {
        position: static;
        width: calc(100vw - 20px);
        max-width: none;
        margin: 10px;
    }

    .profile-content {
        padding: 8px;
    }

    .profile-photo-frame {
        height: min(58vh, 360px);
    }

    .profile-photo-frame img {
        width: min(70vw, 240px);
        height: min(70vw, 240px);
    }
}