hextra_mirror/assets/css/components/cards.css

.hextra-cards {
  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
}

.hextra-card {
  position: relative;
}

.hextra-card img {
  user-select: none;
}

.hextra-card:hover svg {
  color: currentColor;
}

.hextra-card svg {
  width: 1.5rem;
  color: #00000033;
  transition: color 0.3s ease;
}

.hextra-card p {
  margin-top: 0.5rem;
  position: relative;
}

.dark .hextra-card svg {
  color: #ffffff66;
}

.dark .hextra-card:hover svg {
  color: currentColor;
}

.hextra-card-tag {
  position: absolute;
  z-index: 10;
  top: 5px;
  &:where(:dir(ltr)) {
    right: 5px;
  }
  &:where(:dir(rtl)) {
    left: 5px;
  }
}