.related-component_grid-item {
  position: relative;
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin: 8px; 
  padding: 2rem;
}

.related-component_grid-item:hover {
  border: none;
}

.related-component_grid-item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, #58c2bf, #2a683e);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.related-component_grid-item:hover::before {
  opacity: 1;
}

/* Card Label */
.related-component_label {
  font-size: 12px;
  color: #787879;
  margin-bottom: 0;
}

/* Card image */
.related-component_tile-img {
  display: block;
  width: 75px;
  height: 75px;
  object-fit: contain;
  aspect-ratio: 1/1;
}

/* Button Icon */
.related-component_btn-icon svg {
  width: 14px;
  height: auto;
}

.related-component_card-icon {
  width: 35px;
  height: 35px;
}

@media (min-width: 768px) {
  .related-component_card-icon svg {
    opacity: 0;
    transition: opacity .3s ease-in;
  }
}

.related-component_grid-item:hover .related-component_card-icon svg {
  opacity: 1;
}

@media (max-width: 767px) { 
  .related-component_card-icon svg {
    opacity: 1 !important; 
  }
}

.components-listing-main-content_grid-item:hover {
  transform: translateY(-2px);
}

.related-component_tile-heading {
  font-size: 1.6rem;
  font-weight: 600;
}

.components-listing-main-content_tile-category {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
  
.components-page-related-component_tile-description {
  margin: 0;
  flex: 1;
}

.related-component_card-icon {
  flex-shrink: 0;
}

.components-listing-main-content_arrow-icon {
  width: 28px;
  height: 28px;
}

/* Responsive adjustments */
/* @media (min-width: 768px) and (max-width: 991px) {
  .related-component_grid-item {
    width: calc(50% - 16px);
  }
}

@media (max-width: 767px) {
  .related-component_grid-item {
    width: calc(100% - 16px);
  }
} */

/* Loading state */
.related-component_isotope-wrapper.loading {
  opacity: 0.7;
}

@media (max-width: 500px) {
  .components-page-related-component_text-content {
    flex-direction: column;
    gap: 1.3rem;
  }
}


.related-component_isotope-wrapper {
  overflow: hidden;
}

.related-component_grid-item {
  box-sizing: border-box;