blog/_src/_assets/styl/_kremalicious/content-featured.styl

//
// kremalicious3
// --------------
// Content - Featured Posts
//

.featured
    @extend .breakoutviewport
    padding-bottom: ($spacer*2)

    .grid
        margin-bottom: 0

    @media $screen-sm
        padding-bottom: ($spacer*3)

    .hentry__teaser
        picture
            margin: 0

            @media $screen-xs
                margin-left: 0
                margin-right: 0

.featured-link
    @extend .link--nounderline
    display: block
    position: relative

    &:hover,
    &:focus
        img
            border-color: $link-color

.featured-title
    @extend .transition
    transition-property: transform, opacity
    margin: 0
    position: absolute
    top: 25%
    min-width: 45%
    text-align: right
    font-family: $headings-font-family
    font-weight: $headings-font-weight
    font-style: normal
    font-size: $font-size-small
    padding: ($spacer/3)
    background: $link-color
    background: alpha($link-color, .85)
    color: #fff
    text-shadow: 0 1px 0 #000
    left: 0

    opacity: 0
    transform: translate3d(0, -20px, 0)

    .featured-link:hover &
        opacity: 1
        transform: translate3d(0, 0, 0)

img.featured-image
    display: block
    margin-bottom: 0