/* To get images in Bootstrap's card to be the same height/width */
.card-img-top {
  width: 100%;
  height: 15vh;
  object-fit: cover; /* The object-fit: cover enables zoom instead of image stretching. */
} 

.card {
  margin: 5% 0%;
  transition: transform 0.3s ease;
}

.card-body {
  margin: 0% 0% 0% 3%;
  padding: 6% 0%;
}

/* Hover effects */
.card:hover {
  transform: scale(1.01, 1.01);
}

.img-flag-details {
  width: 100%;
  height: 20vh;
}

footer {
  color: #fff;
}

/* Responsive design for image heights */
@media (max-width: 768px) { 
  .card-img-top {
    height: 30vw;
  }
}