<ul class="cards">
  <li class="card card-1">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
  <li class="card card-2">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
  <li class="card card-3">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
  <li class="card card-4">
    <button class="delete-btn">
      <img src="Trash_font_awesome.svg" alt="close button">
      <span class="sr-only">Delete</span>
    </button>
  </li>
</ul>

/* Put new transition name on each card to morph each */
.card-1 {
  view-transition-name: card-1;
}

.card-2 {
  view-transition-name: card-2;
}

.card-3 {
  view-transition-name: card-3;
}

.card-4 {
  view-transition-name: card-4;
}


/* Etc. */

@layer base {
  body {
    display: grid;
    height: 90dvh;
    place-items: center;
    padding: 2rem;
  }
  
  .cards {
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2rem;
    max-width: 1000px;
  }
  
  .card {
    width: 100%;
    aspect-ratio: 2/3;
    display: block;
    position: relative;
    border-radius: 1rem;
    max-width: 220px;
  }
  
  .card-1 {
    background-color: tan;
  }
  
  .card-2 {
    background-color: khaki;
  }
  
  .card-3 {
    background-color: thistle;
  }
  
  .card-4 {
    background-color: wheat;
  }

  .delete-btn {
    position: absolute;
    bottom: -0.75rem;
    right: -0.75rem;
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    border: 4px solid;
    border-radius: 100%;
    background: steelblue;
    color: white;
    
    & img {
      filter: invert();
    }
  }
  
  .sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
}

document.querySelectorAll('.delete-btn').forEach(btn => {
  const card = btn.parentElement;
  btn.addEventListener('click', () => {
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        card.remove();
      });
    } else {
      card.remove();
    }
  })
})