Reports

I'm not sure I understood your demand.

From your screenshots, you only need a red outline around your .card element. To obtain this, you just have to add the outline: 4px solid red; property to your .card class and remove your .card::after pseudo-element. The position: relative; and z-index: 2; are not required anymore in your .card class.

I removed few elements for mor readability :

.image-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;  
}

.background-img {
    width: 100vw;
    height: 100vh;
    background-size: 100%;
    /* z-index: 0; */ /* not necessary anymore */
}

.sticky-notes {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 20px;
    max-width: 1600px; /* Controls how wide the card row is */
    justify-content: center;
    cursor: pointer;
}

.card {
    width: 250px;
    height: 250px;
    color: white;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Arial', sans-serif;
    outline: 4px solid red;
    /* position: relative; */ /* not necessary anymore */
    /* z-index: 2;*/ /* not necessary anymore */
}

.appreciator, .text{
    font-weight: 400;
    font-size: 0.8rem;
    white-space: nowrap;      /* Prevents text from wrapping */
    overflow: hidden; 
}

.avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto;
}

.appreciate-text {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
}

<div class="image-wrapper">
  <img src="https://preview.redd.it/26ig1evbnuh61.png?width=1080&crop=smart&auto=webp&s=2f075f160a65ae1b521e771354120eba83cd5215" alt="background" class="background-img" />   
</div>

<div class="sticky-notes">
  <div class="card" style="background-color: #8E44AD">
    <div class="note-content">
      <h2 class="appreciator">Lorem Ipusm</h2>
      <div class="avatar">
        <img src="https://www.lightningdesignsystem.com/assets/images/avatar2.jpg" alt="avatar" />
      </div>
      <div class="text">is appreciated</div>
      <div class="appreciate-text">Lorem Ipusm</div>
    </div>  
  </div>
</div>

But there are some of your choices that I don't understand.

Why are you using an <img/> element instead of a background-image property in your .image-wrapper class ?
Why your content (<div class="navigation-buttons"> and <div class="sticky-notes">) is not inside your .image-wrapper element ?

79563983