.collection-card {
  --gallery-background: var(--color-card-background);

  .collection-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background-color: var(--gallery-background);
    transition: background-color 0.25s ease-in-out;

    img {
      width: 50%;
      height: 50%;
      object-fit: contain;
    }
  }

  &:hover .collection-card__image,
  &:has(a.collection-card__link:focus-visible) .collection-card__image {
    --gallery-background: var(--color-card-hover-background);
  }
}