@mixin tile($current-size) {
  flex-basis: $current-size;

  &-mobile {
    @media screen and (min-width: $tablet) {
      flex-basis: $current-size;
    }
  }

  &-desktop {
    @media screen and (min-width: $desktop) {
      flex-basis: $current-size;
    }
  }

  &-widescreen {
    @media screen and (min-width: $widescreen) {
      flex-basis: $current-size;
    }
  }

  &-fullhd {
    @media screen and (min-width: $fullhd) {
      flex-basis: $current-size;
    }
  }
}

.tile {
  &-is-flexible {
    display: flex;
    flex-flow: wrap row;
    justify-content: space-between;
  }
}

.no-shrink { flex-shrink: 0 !important; }
.no-grow { flex-grow: 0 !important; }

.is-flex {
  &-full {
    @include tile(100%);
  }

  &-four-fifths {
    @include tile(calc(80% - 1.5rem));
  }

  &-three-quarters {
    @include tile(calc(75% - 1.5rem));
  }

  &-two-thirds {
    @include tile(calc(((100% / 3) * 2) - 1.5rem));
  }

  &-three-fifths {
    @include tile(calc(60% - 1.5rem));
  }

  &-half {
    @include tile(calc(50% - 1.5rem));
  }

  &-two-fifths {
    @include tile(calc(40% - 1.5rem));
  }

  &-one-third {
    @include tile(calc((100% / 3) - 1.5rem));
  }

  &-one-quarter {
    @include tile(calc(25% - 1.5rem));
  }

  &-one-fifth {
    @include tile(calc(20% - 1.5rem));
  }
}
