Source: ui.where-to-buy.styl

@import "variables"

/**
 * A Where-to-buy compolete component.
 * @component .where-to-buy
 * @example <div class="ui where-to-buy">
 *     <!-- content -->
 * </div>
 */
.where-to-buy
    &--inner
        container-max()
        clear-left()

    &--items
        margin 0
        padding 0
        list-style-type none

    &--item
        margin-top 20px
        margin-bottom 20px
        padding 10px 20px
        border 1px solid #d2d2d2

    &--list
        float left
        column(1, 1, gutter)
        margin-left gutter
        margin-right gutter
        @media (min-width: screen-sm)
            column(1, 2, gutter)

    &--map
        float left
        margin-top 15px
        column(1, 1, gutter)
        margin-left gutter
        margin-right gutter
        @media (min-width: screen-sm)
            column(1, 2, gutter)

    &--map--canvas
        width 100%
        height 350px
        margin-bottom 20px

    h1, h2
        font-size 3.4rem
        hlmt-rounded()
        color #2c1200
        @media (min-width: screen-sm)
            font-size 6rem

    h3
        hlmt-rounded()
        font-size 4.2rem
        color #2c1200

    h4
        hlmt-rounded()
        font-size 3.6rem
        color #2c1200