/* Custom padding for each card */
.card.custom-padding {
    padding: 15px !important; /* Adjust padding as needed */
}

/* Custom image size */
.card-img-top.custom-img-size {
    max-width: 100% !important;
    width: auto !important;
    max-height: 250px !important; /* limit height so it's not too big */
    height: auto !important;
    object-fit: contain !important; /* show the whole image, no crop */
    display: block;
    margin: 0 auto;
}

.card {
    /*background-color: #7f8892;  Light grey for card background */
}

.container {
    background-color: #e9ecef; /* Slightly darker grey for container background */
}


.sidebar {
    background-color: #f8f9fa;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Primary image - fixed display size */
.main-image {
  width: 300px !important;
  height: 200px !important;
  max-width: 300px !important;
  max-height: 200px !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  border: 1px solid #ddd;
  background-color: #fff;
}

.card-thumb {
  width: 60px !important;
  height: 40px !important;
  object-fit: cover !important;
  display: block;
  cursor: pointer;
  border-radius: .25rem;
  border: 1px solid #dee2e6;
}

.card-thumb.active {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .25);
}
/* Responsive adjustments */
@media (max-width: 768px) {
   .main-image { max-height: 300px; }
   .card-thumb { max-width: 96px; max-height: 96px; padding:4px; }
 }

@media (max-width: 576px) {
   .main-image { max-height: 220px; }
   .card-thumb { max-width: 72px; max-height: 72px; padding:3px; }
 }