.mod-ordiximagetabs-card {
  aspect-ratio: 1 / 1.5;
  overflow: hidden;
  width: 100%;  
}

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

.mod-ordiximagetabs-link {
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.mod-ordiximagetabs-link .card-img-overlay {
  transition: background-color 0.2s;
}

.mod-ordiximagetabs-link.active .card-img-overlay{
  background-color: rgba(33,37,41,0.25) !important;
}

.mod-ordiximagetabs-link:not(.active) .card-img-overlay {
  background-color: rgba(33,37,41,0.75) !important;
}

/* Arrow pointing to content area - only for active tab in desktop view */
.mod-ordiximagetabs-arrow {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #0d6efd; /* Bootstrap primary color */
  margin: 0.5rem auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mod-ordiximagetabs-arrow.active {
  opacity: 1;
}

/* Hide arrow in mobile view */
@media (max-width: 767.98px) {
  .mod-ordiximagetabs-arrow {
    display: none;
  }
}

/* Mobile pills navigation styling */
@media (max-width: 767.98px) {
  .nav-pills .nav-link {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    border-radius: 0.375rem;
  }
  
  .nav-pills {
    flex-wrap: wrap;
  }
}