@import "../_sass/bootstrap/bootstrap/_variables";

@mixin section-index-item($size) {
    $percentageValue: percentage($size / $grid-columns);
    flex-basis: $percentageValue;
    max-width: $percentageValue;
}

.section-index {
    display: flex;
    flex-wrap: wrap;

    &__item {
        padding-left: ceil(($grid-gutter-width / 2));
        padding-right: floor(($grid-gutter-width / 2));

        // xs
        @include section-index-item(12);

        @media (min-width: $screen-sm-min) {
            @include section-index-item(6);
        }
    
        @media (min-width: $screen-md-min) {
            @include section-index-item(4);
        }
    }
}
