.root {
  cursor: pointer;

  @mixin dark {
    border: 1px solid var(--mantine-color-gray-8);
  }

  @mixin light {
    background-color: transparent;
    border: 1px solid var(--mantine-color-gray-3);
  }
  &:hover {
    .overlay {
      opacity: 1;
    }
  }
}

.image {
  object-fit: contain;
  height: rem(420);

  @media (max-width: $mantine-breakpoint-sm) {
    height: rem(300);
  }
}

.title {
  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));

  font-size: rem(22);

  @media (max-width: $mantine-breakpoint-sm) {
    font-size: rem(18);
  }
}

.description {
  width: 80%;
  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-2));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.like_icon {
  @mixin light {
    background-color: var(--mantine-color-gray-6);
  }
}

.vote_section {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  transition: opacity 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0;
  z-index: var(--app-header-z-index)-1;
}

.view_button {
  position: absolute;
  right: rem(20);
  top: rem(20);
}
