/*
This code sets up three images in a row on the home page (home_topimage), scales for small screens.
Works best if images are 400x300 pixels, can try other sizes if they are all sized the same.
*/

.image-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.image-row div {
  flex: 1 1 30%;
  max-width: 33%;
}

.image-row img {
  width: auto;
  height: 200px; /* shrink here */
  object-fit: cover;
  object-position: top;
  justify-content: center;  
  border-radius: 6px;
}

/* Change button colour globally*/
/* normal button */
.btn-primary {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}

/* hover / focus */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #218838;
    border-color: #218838;
}

/* active / pressed */
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover {
    background-color: #1e7e34; /* slightly darker for pressed state */
    border-color: #1e7e34;
    box-shadow: none; /* optional: remove shadow if undesired */
}

/* 
 * Next custom code can go here
*/