$column-gap: 0.75rem !default .columns box-sizing: border-box height: 100% margin-left: (-$column-gap) margin-right: (-$column-gap) margin-top: (-$column-gap) display: flex flex-wrap: wrap margin-bottom: calc(1.5rem - #{$column-gap}) &:last-child margin-bottom: (-$column-gap) &:first-child margin: 0 .columns_centered justify-content: center .columns_vcentered align-items: center .columns__column box-sizing: border-box display: block flex-basis: 0 flex-grow: 1 flex-shrink: 1 height: 100% padding: $column-gap position: relative width: 100% z-index: 2 .columns__column_centered-content display: flex flex-direction: column justify-content: center overflow: hidden @each $name, $width in $grid-breakpoints @for $i from 1 through 12 .columns__column_#{$name}_#{$i} flex: none +from($width) @for $i from 1 through 12 .columns__column_#{$name}_#{$i} flex: none width: percentage($i / 12) +until($width) .columns__column_#{$name}_hidden display: none
