$blue: hsl(202,75%,64%);
$total: 6;

@for $i from 1 to $total{
    div.kasser>*:nth-of-type(#{$i}){
        display: block;
        background-color: scale-color($blue, $lightness: calc(-5% * ($i - 1)));
    }
}

@mixin imagegrid($columns, $margin){
    $availablespace: calc(100% - $margin * ($columns - 1));
    display: flex;    
    flex-wrap: wrap;
    gap: $margin;
    &>*{
        aspect-ratio: 1/1;
        width: calc($availablespace / $columns);
        display: none;
    }
}

.kasser{
    @include imagegrid(3, 1rem);
}

@media (min-width: 600px){
    $total:12;
    @for $i from 1 to $total{
        div.kasser>*:nth-of-type(#{$i}){
            display: block;
            background-color: scale-color($blue, $lightness: calc(-5% * ($i - 1)));
        }
    }
    .kasser{
        @include imagegrid(5, 1rem);
    }
}