Responsive, mobile first, CSS flexbox, Javascript Vanilla,

Great job with adding the object-fit: cover and getting the your share box to float above! Adding a psuedo element to it can help give it that speech bubble look

.boxShare::after {
    content: "";
    height: 1rem;
    width: 1rem;
    background-color: var(--veryDarkGrayishBlue);
    box-shadow: -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%) rotate(-45deg);

I also noticed that in mobile view there is some margin missing from a couple elements

The top of Michelles portrait peeps up from the share box in mobile view because the div is a little bit taller than the boxShare. I got around this by stacking both in the same grid-area, which made the share box exactly as tall as the profile div