.grid-container

{
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 20px;
}

@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
    }
}

@media (min-width: 992px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr); /* Three columns for large screens */
    }
}

@media (min-width: 1150px) {
    .grid-container {
        grid-template-columns: repeat(4, 1fr); /* Three columns for large screens */
    }
}

.grid-item {
    /* Ensure the grid items expand to fill the available space */
    width: 100%;
}

/* Adjust checkbox appearance as needed */
.form-check-input {
}