// cards -> news

.cards { // ul
    display: flex;
    // flex-direction: row;
    // flex-wrap: nowrap;
    // justify-content: flex-start;

    > li:last-child {
        margin-right: 0;

        @media screen and (max-width: 1100px) {
            margin-bottom: 0;
        }
    }

    @media screen and (max-width: 1540px) {
	    &:not(.slidee) {
        	justify-content: space-between;
        } 
    }
    @media screen and (max-width: 1100px) {
	    &:not(.slidee) {
	        justify-content: center;
	        flex-wrap: wrap;
        }
    }
    @media screen and (max-width: 850px) {
	    &:not(.slidee) {
	        display: block;
		}	
    }
}

.card { // li
    margin-right: 30px;
    width: 426px;
    position: relative;

    @media screen and (max-width: 1540px) {
        &:not(.slidee-card) {        
	        width: calc(33% - 15px);
	        margin-right: 0;
        }
    }
    @media screen and (max-width: 1100px) {
	    &:not(.slidee-card) {        
	        width: calc(50% - 20px); // 2*10
	        margin-left: 10px;
	        margin-right: 10px;
	        margin-bottom: 20px;
        }
    }
    @media screen and (max-width: 850px) {
        &:not(.slidee-card) {
	        width: 100%;
	        margin-left: 0;
	        margin-right: 0;
	        margin-bottom: 40px;
        }
    }

    &__container {}

    &__mainlink {
        position: absolute;
        top: 0;
        right: 0;
        border: 0;
        bottom: 0;
        left: 0;
        z-index: 4;

        &:focus, &:hover {
            ~ .card__imgContainer:after {
                opacity: 1;
            }
            ~ .card__contentContainer .card__title {
                color: $color__tertiary; 
            }
        }
    }

    &__imgContainer {
        position: relative;
        width: 100%;
		padding-bottom: 66%;
        overflow: hidden;
        // background-color: $color__background;
        background-color: $color__background--light;
        border-radius: 8px;
        box-shadow: 0px 14px 0px -10px $color__shadow--dark;


        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba($color__tertiary, .9);
            pointer-events: none;
            z-index: 1;
            opacity: 0;

            transition: opacity .2s $mainEase;
        }


        @media screen and (max-width: 1540px) {
            width: auto;
        }
    }
   
    // &__img {
    //     width: auto;
    //     min-width: 100%;
    //     min-height: 100%;
    // }
    &__bcg {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    &__contentContainer {
        position: relative;
        padding: 0px 20px;
        z-index: 3;
        
        @media screen and (max-width: 850px) {
	        padding: 0px;
        }
    }
    &__tagList {
        margin-top: -15px;

        display: flex;
        
        @media screen and (max-width: 850px) {
	        margin-left: 30px;
        }

        > li:last-child {
            margin-right: 0;
        }
    }
    &__tag {
        display: inline-block;
        background: $color__primary;
        font-size: 14px;
        line-height: 36px; // 'height'
        font-family: $font__title;
        padding: 0px 17px;
        color: $color__white;
        margin-right: 5px;
        border-radius: 18px
    }

    &__title {
        font-size: 22px;
        line-height: 22px;
        margin-top: 30px;
        max-width: 370px;
        color: $color__secondary;
        
        // --- ELLIPSIS if too much text ---
        position: relative;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
        height: 22px;

        transition: color .2s $mainEase;
    }
    &__content {
        // margin: auto;
        margin-top: 10px;
        font-size: 16px;
        line-height: 24px;
        max-width: 370px;
        color: rgba($color__text, .8);

        // // --- ELLIPSIS if too much text ---
        // position: relative;
        // overflow: hidden;
        // height: 60px; // 2 line height

        // // -- si support ok
        // @supports (display: -webkit-box) {
        //     display: -webkit-box;
        //     -webkit-line-clamp: 2;
        //     /* autoprefixer: off */
        //     -webkit-box-orient: vertical;
        //     /* autoprefixer: on */

        //     &:before, &:after {
        //         display: none;
        //     }
        // }

        // // -- sinon fallback method 3
        // &:before {
        //     position: absolute;
        //     content: '...';
        //     bottom: 0;
        //     right: 0;
        // }

        // &:after {
        //     content: '';
        //     position: absolute;
        //     right: 0;
        //     width: 1rem;
        //     height: 1rem;
        //     background: $color__white;
        // }
    }

}