.gradient-header {
    width: 80%;
    height: 100px;
    background-color: pink;
    margin: 0px auto;
	line-height: 100px; 	
	background: linear-gradient(to right, #a9ff68, #ff7f50); /* Lime to Peach gradient */
	color: #000000; 
}

.secondpage-body-content {
	width: 80%;
    margin: 0 auto; /* Center the wrapper on the page */
    padding: 0 0px; /* Add padding to the left and right sides */
    background-color: none; /* For visibility */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
    display: flex;
	text-align: justify; 

/*
	width: 80%; 
	margin: 0 auto; /* Center the wrapper on the page 
    padding: 0 20px; /* Add padding to the left and right sides        
	background-color: lightgrey; /* For visibility     
	box-sizing: border-box; /* Ensure padding is included in the width calculation 
	display: flex; /* Use flexbox to ensure parent resizes with child 
	flex-direction: row; 
    flex-wrap: wrap; /* Allows wrapping to the next line on smaller screens 

*/
}

.secondpage-body-content img {
    width: 100%; /* Ensure the image fills the parent container's width */
    height: auto; /* Maintain the image's aspect ratio */
    max-width: 100%; /* Prevent the image from exceeding the parent's width */
    display: block; /* Remove inline spacing that could cause overflow */
    box-sizing: border-box; /* Include padding in the width calculation */
}

.body-content-images {
    width: 100%;
    margin: 0 auto; /* Center the wrapper on the page */
    display: flex; /* Use flexbox to arrange images in a row */
    flex-direction: row;
    justify-content: space-between; /* Space out images evenly */
    padding: 0; /* No padding on the container itself */
    background-color: none; /* For visibility */
    flex-wrap: wrap; /* Allows wrapping to the next line on smaller screens */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
}

.body-content-images img {
    max-width: calc(16.66% - 10px); /* Allow up to 6 images in a row, adjusting for padding */
    height: auto;
    margin: 10px 5px; /* Apply equal margin on left and right for spacing between images */
    flex-grow: 1; /* Allow images to grow and shrink based on the container size */
}

.body-content-images img:first-child {
    margin-left: 0; /* Remove left margin for the first image */
}

.body-content-images img:last-child {
    margin-right: 0; /* Remove right margin for the last image */
}


@media (max-width: 768px) {
	.body-content-images img {
        max-width: calc(33.33% - 20px); /* Adjust to 3 images per row on smaller screens */
    }
}

@media (max-width: 480px) {
	.body-content-images img {
        max-width: calc(50% - 20px); /* Adjust to 2 images per row on very small screens */
    }
}