/************************************************************
 * File Name: custom-image-display.css
 * Author: Satya Prakash Nigam
 * Date Created: 22-12-2024
 * Last Modified: 22-12-2024
 * 
 * Description:
 * This CSS file defines the styles for image containers, including
 * centered images, light background, padding, rounded corners, 
 * and a subtle shadow effect. The layout is responsive, ensuring 
 * the container adjusts according to different screen sizes, while
 * maintaining a modern and visually appealing design.
 * 
 * License: MIT License 
 *   
 ************************************************************/
  
.image-container {
	height: 150px;
	max-width: 100%; 
	overflow: hidden;
	background-color: #f8f9fa;  
	border-radius: 8px;  
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.image-container img {
	width: 100%; /* Ensure the image takes the full width of the container */
	object-fit: cover; /* Maintain the aspect ratio and cover the container */
}  

/* Optional spacing for sections */
.spacer {
    height: 25px; /* Consistent height for spacing */
}