.isotope-selector {
    width: calc((100% / var(--col)) - (var(--gutter) * (var(--col) - 1) / var(--col)));
    margin-bottom: var(--gutter);  // Ensure vertical spacing
}

.isotope-wrapper {
    --col: 1;  // Default to 1 column
    --gutter: 20px;  // Gutter for spacing between columns and rows
    overflow: hidden;  // Avoids horizontal scroll due to negative margins
}

@media screen and (min-width: 768px) {
    .isotope-wrapper {
        --col: 2;  // 2 columns on medium screens
    }
}

@media screen and (min-width: 992px) {
    .isotope-wrapper {
        --col: 3;  // 3 columns on large screens
    }
}