.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr .5fr;
    gap: 10px;
    width: 100%;
    max-width: 66%; /* Set maximum width to 66% */
    margin: 0 auto; /* Center the content */
}

.grid-header, .grid-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left; /* Ensure text is left-aligned */
}

.grid-header {
    cursor: pointer;
    font-weight: bold;
}

.grid-item {
    display: flex;
    flex-direction: column; /* Ensure text is below the image */
    margin: 10px; /* Add some spacing between items */
}

.grid-item img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}





    /* Media query for larger screens */
    @media (min-width: 768px) {
        .grid-container {
            width: 66%;
            /* Take up 66% of the viewport width */
        }
    }