.sponsorship-grid
  standardGutterSize = 1.5em
  lightGray = #f6f6f6

  display flex
  justify-content center
  align-items flex-center
  flex-wrap wrap
  margin 0

  @media (max-width 420px)
    margin-left -1em
    margin-right -1em

  .sponsorship
    display flex
    flex-flow column
    width 16em
    text-align left
    margin (standardGutterSize / 2)
    background lightGray
    text-decoration none

    @media (max-width 48em)
      font-size .8em
      width 14em

    @media (max-width 420px)
      width auto
      font-size .95em

    .sponsorship-icon
      position relative

      &::after
        content ""
        display block
        height 0
        width 100%
        padding-bottom 66%

      &:hover
        opacity .8

      img
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        height 6em
        width 6em
        margin auto
        max-width 100%
        max-height 100%

    .sponsorship-title
      display block
      padding 0 standardGutterSize

      > h3
        font-weight 500
        margin 0

        @media (max-width 48em)
          font-size 1.25em

      &:not(:hover)
        color inherit

    .sponsorship-description
      padding .5em standardGutterSize

      > *:last-child
        margin-bottom 0

    .sponsorship-links
      margin-top auto
      padding-bottom .75 * standardGutterSize

      > a
        padding .375em standardGutterSize
        display block
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        text-decoration none
        font-weight 500

        &:hover
          background #3279b3
          color #fff