@import '../1-Helpers/variables';

@mixin grids {
    &-1 {
        width: calc(100% / 12);
    }
    &-2 {
        width: calc(100% / 6);
    }
    &-3 {
        width: 25%;
    }
    &-4 {
        width: calc(100% / 3);
    }
    &-5 {
        width: calc(100% * (5 / 12));
    }
    &-6 {
        width: 50%;
    }
    &-7 {
        width: calc(100% * (7 / 12));
    }
    &-8 {
        width: calc(100% * (2 / 3));
    }
    &-9 {
        width: 75%;
    }
    &-10 {
        width: calc(100% * (10 / 12));
    }
    &-11 {
        width: calc(100% * (11 / 12));
    }
    &-12 {
        width: 100%;
    }
}

// split extra small screens into 4 columns instead of 12
@mixin grids-xsmall {
    &-1, &-2, &-3 {
        width: calc(25%)
    }
    &-4, &-5, &-6 {
        width: calc(50%)
    }
    &-7, &-8, &-9 {
        width: calc(75%)
    }
    &-10, &-11, &-12 {
        width: calc(105%)
    }
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: inherit;

    &.vcenter {
        align-items: center;
    }

    &.hcenter {
        justify-content: center;
    }

    &.hvcenter {
        align-items: center;
        justify-content: center;
    }

    @media only screen and (max-width: $breakpoint-mobile-small) {
        .sm {
            @include grids-xsmall;
        }
    }
    @media only screen and (min-width: $breakpoint-mobile-small) {
        .sm {
            @include grids;
        }
    }
    @media only screen and (min-width: $breakpoint-mobile) {
        .md {
            @include grids;
        }
    }
    @media only screen and (min-width: $breakpoint-tablet) {
        .lg {
            @include grids;
        }
    }

}