/* ==========================================================================
   Two featured cases next to each other.
   For example as found at the bottom of the about page.
   ========================================================================== */

.featured-cases

  .featured-case
    position: relative

    &:hover
      .tags .tag
        border-color: rgba(255,255,255,0.6)

  .color-overlay
    +position(absolute, 0 null null 0)
    width: 100%
    height: 100%
    opacity: 0

  a
    color: #fff

  .text-overlay
    display: flex
    justify-content: center
    align-items: center
    +position(absolute, 0 null null 0)
    width: 100%
    height: 100%
    text-align: center

  .title
    display: inline-block
    position: relative
    z-index: 2
    margin: -8px 0 10px -8px
    padding: 0 8px
    color: #fff
    font-size: 1.6rem
    font-weight: semibold()

    opacity: 0
    +transform(translateY(20px))

  .tags
    opacity: 0

  .arrow
    display: inline-block
    width: 14px
    height: 14px
    opacity: 0
    +transition(right 200ms ease-out)
    +sprite(-40px -35px)
    +transform(translateX(-10px))


  /*
   * Small breakpoint:
   * Default is flex, place below each other with display block
   */
  +respond-to-width($smGridBreakpoint)
    display: block /* 1 */