.piece-card {
  position: relative;
  mask-image: url("/assets/bijenmuseum/decorations/hexagon-ea38fb82.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
  aspect-ratio: 133 / 150;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover, &:focus {
    .piece-card-overlay {
      opacity: 1;
    }
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/assets/bijenmuseum/decorations/hexagon-outline-819a05d7.svg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .shared-image {
    width: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.piece-card-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  left: 0;
  top: 0;
  /* Hidden with opacity instead of display, so the title stays the link's accessible name */
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(232,178,18,0.9);
  color: var(--color-white);

  svg {
    width: 25px;

    @media (min-width: 992px) {
      width: unset;
    }
  }
}

.piece-card-overlay-expo-category {
  font-family: var(--font-family-sans-serif-special);
  font-weight: var(--font-weight-regular);
  word-break: break-word;
  color: var(--color-primary);
  font-size: var(--font-size-regular-large);
  margin: 0 0 20px 0;

  @media (min-width: 576px) {
    font-size: var(--font-size-medium);
  }
}

.piece-card-overlay-title {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-regular-large);
  font-weight: var(--font-weight-bold);
  margin: 0 0 10px;
  padding: 0 5px;
  text-align: center;

  @media (min-width: 576px) {
    font-size: var(--font-size-medium);
  }
}