/* IMAGE BLOCK */

.image {
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.image.has-description::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 1rem;
  mask-image: var(--icon-description);
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.image[aria-selected="true"] {
  outline: 2px solid var(--color-focus-ring);
}
.image[aria-selected="true"]::after {
  content: attr(data-count);
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  border-radius: 50%;
  color: var(--color-white);
  font-weight: 700;
  background: var(--color-grey-800);
  display: grid;
  place-items: center;
  text-align: center;
  width: 1.5rem;
  height: 1.5rem;
}

.image .tags {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  right: var(--space-12);
  gap: var(--space-8);
}
