@import '~app/assets/stylus'


.root
  background: $themeColor
  color: $backgroundColor

  padding: $minPadding 0

  +from($sml)
    padding: $smlPadding 0

  +from($med)
    padding: $medPadding 0

  +from($lge)
    padding: $lgePadding 0

  +from($xlg)
    padding: $xlgPadding 0

.column
  composes: column from 'app/assets/stylus/common.styl'

.wrapper
  display: flex
  flex-direction: row
  flex-wrap: wrap

.info
  flex: 0 0 100%

  +from($med)
    flex-basis: calc((100% - 2 * $medGutter) / 3)
    margin-right: $medGutter

    &:nth-child(3n)
      margin-right: 0

  +from($lge)
    flex-basis: calc((100% - 3 * $lgeGutter) / 4)
    margin-right: $lgeGutter

    &:nth-child(n)
      margin-right: $lgeGutter

    &:nth-child(4n)
      margin-right: 0

  +from($xlg)
    flex-basis: calc((100% - 3 * $xlgGutter) / 4)
    margin-right: $xlgGutter

    &:nth-child(n)
      margin-right: $xlgGutter

@import '~app/assets/stylus'


.root
  background: $themeColor
  color: $backgroundColor

  padding: $minPadding 0

  +from($sml)
    padding: $smlPadding 0

  +from($med)
    padding: $medPadding 0

  +from($lge)
    padding: $lgePadding 0

  +from($xlg)
    padding: $xlgPadding 0

.column
  composes: column from 'app/assets/stylus/common.styl'

.wrapper
  display: flex
  flex-direction: row
  flex-wrap: wrap

.info
  flex: 0 0 100%

  +from($med)
    flex-basis: "calc((100% - %s) / 3)" % (2 * $medGutter)
    margin-right: $medGutter

    &:nth-child(3n)
      margin-right: 0

  +from($lge)
    flex-basis: "calc((100% - %s) / 4)" % (3 * $lgeGutter)
    margin-right: $lgeGutter

    &:nth-child(n)
      margin-right: $lgeGutter

    &:nth-child(4n)
      margin-right: 0

  +from($xlg)
    flex-basis: "calc((100% - %s) / 4)" % (3 * $xlgGutter)
    margin-right: $xlgGutter

    &:nth-child(n)
      margin-right: $xlgGutter

Fix stylus bug with variables inside calc
Fix stylus bug with variables inside calc
