/* Responsive styles for hospital cards */

/* Base styles to override horizontal scrolling */
.hospitals-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  overflow-x: visible;
  padding-bottom: 2rem;
}

/* Hospital card for vertical layout */
.hospital-card {
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
  margin-bottom: 2rem;
}

/* Ensure images maintain a good aspect ratio */
.hospital-image {
  height: 250px;
}

/* Optional: for larger screens, we can keep a grid layout */
@media (min-width: 992px) {
  .hospitals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    overflow-x: visible;
  }
  
  .hospital-card {
    max-width: 100%;
    margin-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .hospitals-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Hide any remaining horizontal scrolling controls */
.ribbon-controls,
.swipe-indicator {
  display: none;
}