.gallery-section {
    padding: 20px;
    background-color: #f4f4f4;
}

/* Gallery Section */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the spacing between images */
    justify-content: center;
    margin-bottom: 50px;
}

.gallery-item {
    flex: 1 1 400px; /* Ensure the width is 300px */
    max-width: 400px; /* Set the width to 400px */
    height: 300px; /* Set the height to 300px */
    margin-bottom: 10px; /* Space between rows */
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Ensure the images have rounded corners */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures all images are resized and cropped to fit within the container */
    display: block;
    border-radius: 8px; /* Maintain rounded corners */
}

@media (max-width: 1200px) {
    .gallery-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .gallery-container {
        grid-template-columns: 1fr;
    }
    
    .gallery-item {
        width: 80%; /* Adjust width to 80% of the screen */
        height: auto; /* Let height adjust based on aspect ratio */
        max-width: none; /* Remove max-width limitation */
    }
    
    .gallery-item img {
        width: 100%; /* Ensure the image width follows the container */
        height: auto; /* Maintain aspect ratio */
    }
}