.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px; /* Add spacing between grid items */
    width: 100%;
    height: auto;
}

.grid-item {
    background-color: #f2f2f2;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto; /* Let the height adjust to content */
    overflow: hidden;
    padding: 24px;
    flex-direction: column; /* Stack content vertically for small items */
}

.grid-item img {
    width: 100%; /* Ensure images scale to container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Change to a single column for mobile */
    }

    .grid-item {
        padding: 16px; /* Reduce padding for smaller screens */
    }

    .grid-item img {
        width: 100%; /* Make images responsive */
        height: auto; /* Maintain proper proportions */
    }
}