/* Custom selectors */
@custom-selector :--headings h1, h2, h3, h4, h5, h6

@custom-media --viewport-medium (width <= 50rem)

%flexer
    display: flex
    justify-content: center
    align-items: center
.f
    &-row, &-col
        @extend %flexer
        &.start
            justify-content: flex-start
        &.end
            justify-content: flex-end
        &.between
            justify-content: space-between
        &.around
            justify-content: space-around
        &.center
            justify-content: center
            align-items: center
    &-row
        flex-direction: row
    &-col
        flex-direction: column
    &-grow
        flex-grow: 1

.b
    &-radius
        border-radius: 5px
    &-none
        border: none
    &-solid
        border: #000000 1px solid