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

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

    .grid
        margin-bottom: 0

    .grid__col
        &:first-child
            margin-left: -($spacer)
        &:last-child
            margin-right: -($spacer)

    @media $breakpoint2
        padding-bottom: ($spacer*3)
        .grid__col
            padding-top: 0
            &:first-child
                margin-left: -($spacer * 2)
            &:last-child
                margin-right: -($spacer * 2)

    @media $breakpoint3
        .grid__col
            &:first-child
                margin-left: -($spacer * 4)
            &:last-child
                margin-right: -($spacer * 4)

    .hentry__teaser
        picture
            margin: 0

            @media $breakpoint1
                margin-left: 0
                margin-right: 0

.featured-link
    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