.brand-page
  .brand-list
    padding: 0 8px 16px
    background-color: $mobileGray
    +flex(space-between, flex-start)
    +flex-rows

    .brand
      width: calc( (100vw - 32px) /3)
      height: calc( (100vw - 32px) /3)
      margin-bottom: 8px
      box-sizing: border-box
      border: 1px solid $mobileBorderColor
      background-color: white
      a
        text-decoration: none
        padding: 8px
        display: block
        height: 100%
        width: 100%

        .name
          display: block
          +regular
          font-size: 13px
          line-height: 15px
          color: $lightGreyFont
          margin: 0
          position: relative
          &:after
            content: '›'
            +semibold
            color: $lightGreyFont
            font-size: 25px
            line-height: 25px
            position: absolute
            right: 2px
            top: -2px
            height: 100%
            +flex(center,center)
            opacity: 0.3

        .logo
          height: calc(100% - 20px)
          width: 100%
          +flex(center, center)
          img
            max-width: 85%
            max-height: 85%



+media-query(400px)
  .brand-page
    .brand-list
      .brand
        width: calc( (100vw - 24px) /2)
        height: calc( (100vw - 24px) /2)