/* styles.css - loads AFTER bootstrap.min.css, so these rules win. */
/* Your six photos are different shapes. This crops them all to the same
box so the card grid lines up. object-fit trims the overflow instead
of squashing the picture. */
.card-img-top {
height: 220px;
object-fit: cover;
}
/* A small lift on hover, so the cards read as clickable. */
.card {
transition: transform 0.15s ease;
}
.card:hover {
transform: translateY(-3px);
}

/* added this myself because I didn't like that the image was too big for my screen */
main img {
  display: block;
  max-height: 75vh;
  width: auto;
  margin-inline: auto;
}