/* WKND teaser - card.less*/
  
@teaser-height: 350px;
@teaser-img-height:  @teaser-height;

.cmp-teaser--card {

    .cmp-teaser {
        position: relative;
        height:  @teaser-height;
        max-height:  @teaser-height;
        overflow: hidden;
        background-color: #ededed;
        margin-bottom: @gutter-padding;

        @media (max-width: @screen-small) {
            width:  @teaser-height;
            margin-left: auto !important;
            margin-right: auto !important;
        } 
        
        .cmp-teaser__image {
            width: 100%;
            overflow: hidden;
            padding-top: 0px;

            .cmp-image__image {
                margin-top: 0px;
                object-fit: cover;
                object-position: top;
                height: @teaser-img-height;
                width: 100%;
                -webkit-transition: all .2s;
                -moz-transition: all .2s; 
                -o-transition: all .2s;
                transition: all .25s;
            }
        }

        .cmp-teaser__title {
            font-family: @font-family-serif;
            width: 100%;
            text-align: left;
            font-size: @font-size-h3;
            margin-top: 0;
            position: absolute;
            top: @gutter-padding;
            padding-left: @gutter-padding;
        }

        .cmp-teaser__title-link {
            color: @teaser-light-color;
        }

        .cmp-teaser__description {
            display: none;
        }

        .cmp-teaser__action-container {
            position: absolute;
            bottom: @gutter-padding * 2;
            left: @gutter-padding;
        }

        .cmp-teaser__action-link {
            border: 1px solid @teaser-light-color;
            color: @teaser-light-color;
            background-color: transparent;
            -webkit-transition: all .25s ease-out;
            -moz-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        &:hover {
            .cmp-teaser__action-link {
                color: @teaser-dark-color;
                background-color: @brand-primary;
                border-color: @brand-primary;
                
            }

            .cmp-image__image {
                -moz-transform: scale(1.05);
                -webkit-transform: scale(1.05);
                transform: scale(1.05);
            }
        }
    }
}