/* ========== UNIVERSAL IMAGE RESIZE ========== */
img {
  width: 100%;           /* scale down to fit container */
  height: auto;          /* maintain aspect ratio */
  display: block;
  border-radius: 8px;    /* optional rounded corners */
}

.founder-note img { object-fit: cover; }

/* Optional: add padding around images */
.image-wrapper {
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
  margin: 15px auto;
}

/* ========== THUMBNAIL STYLES ========== */
.thumbnail {
  width: 100%;           /* scale image to fill the container */
  aspect-ratio: 2 / 3;   /* create a uniform portrait aspect ratio */
  object-fit: contain;   /* ensures the entire image fits inside, preventing cropping */
  background-color: #f9f9f9; /* adds a light background for any empty space */
  border: 1px solid #ddd;/* adds a light grey border */
  cursor: pointer;       /* changes cursor to a pointer on hover */
  transition: box-shadow 0.3s ease-in-out; /* smooth transition for the hover effect */
}

/* Add a shadow effect when hovering over thumbnails */
.thumbnail:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ========== SMALLER THUMBNAIL ========== */
.thumbnail-sm {
  width: 100px;          /* set a fixed width for smaller thumbnails */
  height: 100px;         /* set a fixed height for smaller thumbnails */
  object-fit: cover;     /* ensures the image covers the area */
  border: 1px solid #ddd;/* adds a light grey border */
  cursor: pointer;       /* changes cursor to a pointer on hover */
  transition: box-shadow 0.3s ease-in-out; /* smooth transition for the hover effect */
}

.thumbnail-sm:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Style for images that need to show full height without cropping */
.full-height-model {
  object-fit: contain;
}

/* ========== CONTENT PAGE STYLES ========== */
.content-image {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* ========== FOUNDER'S IMAGES ========== */
.side-by-side-images img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}