@mixin base() {
    margin-bottom: 1rem;

    @media (min-width: 600px) {
        display: flex;
        flex-shrink: 0;
        flex-grow: 0;
        margin-right: 1rem;
        
        &:last-child {
            margin-right: 0;
        }
    }

    @media (min-width: 600px) and (max-width: 799px) {
        @include flexWidths(2);
    }

    @media (min-width: 800px) and (max-width: 1199px) {
        @include flexWidths(3);
    }

    @media (min-width: 1200px) {
        @include flexWidths(4);
    }

    
}

@mixin flexWidths($items: 1) {
    flex-basis: calc(#{100/$items}% - 1rem);
    
    &:nth-child(#{$items}n) {
        margin-right: 0;
    }
}

&__item {
    @include base;
}