.spotlight-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next row */
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; /* Adds space between items */
}

.spotlight {
    flex: 1 1 calc(25% - 20px); /* Three items per row by default, with some gap */
    margin-bottom: 20px; /* Space between rows */
}

.image img {
    width: 100%;  /* Make the images responsive */
    height: auto;  /* Maintain aspect ratio */
}

/* Media Query for tablets and mobile devices */
@media (max-width: 768px) {
    .spotlight {
        flex: 1 1 calc(50% - 20px); /* Two items per row on tablets and smaller screens */
    }
}

@media (max-width: 480px) {
    .spotlight {
        flex: 1 1 100%; /* One item per row on mobile devices */
    }
}