svg
  max-height: 100%
  max-width: 100%

$carbon-spacing: 1rem
$carbon-shadow-size: 0.75rem
$carbon-height: 100px
$carbon-image-height: 100px
$carbon-image-width: 130px
$carbon-poweredby-height: 20px

#carboncontainer
  align-items: center
  display: flex
  justify-content: center
  margin-left: auto
  margin-right: auto
  max-width: $carbon-width
  min-height: $carbon-height
  min-width: 280px

#carbon
  flex-grow: 1
  min-height: $carbon-height
  padding: 0
  position: relative
  &:hover
    background-color: $white
    box-shadow: 0 0 0 $carbon-shadow-size $white
  +tablet
    width: $carbon-width

#carbonads
  font-size: 14px
  text-align: left
  a,
  span
    display: block
  .carbon-wrap
    min-height: $carbon-height
    position: relative
    &:hover
      .carbon-img
        opacity: 0.9
  .carbon-img
    bottom: 0
    float: left
    left: 0
    min-height: $carbon-height
    padding: 0
    position: absolute
    top: 0
    width: calc(#{$carbon-image-width} + #{$carbon-spacing})
    img
      display: block
      height: $carbon-image-height
      width: $carbon-image-width
    &:hover
      & + .carbon-text
        color: $link
    &:active
      opacity: 0.8
  .carbon-text
    display: block
    color: $text-strong
    line-height: 20px
    min-height: $carbon-height
    padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
    &:hover
      color: $link
  .carbon-poweredby
    bottom: 0
    color: $text-light
    display: inline
    font-size: $size-small
    line-height: $carbon-poweredby-height
    position: absolute
    right: 0
    &:hover
      text-decoration: underline