.et-widget-news {

    // Items Slider
    .et-news-items {
        .slick-slide > div {
            height: 100%;
        }
    }

    .et-news-headline {
        .et-textfield {
            margin-bottom: 5px;
        }
    }

    .et-news-overview {
        margin-bottom: 20px;

        .btn {
            padding: 0;
            font-weight: $font-weight-bold;
            color: color-yiq($colorContentBackground, $colorFontMuted, $colorFontLight);
            &:hover {
                color: $colorLinkHover;
            }
            &:active {
                color: $colorLinkActive;
            }
        }
    }

    // News Item
    .et-news-item {
        background-color: $colorNeutral3;
        color: color-yiq($colorNeutral3);
        border: 0 none;
        height: 100%;
        display: flex !important; // Needed, because slick sets it to inline-block which breaks our styles!

        &-image {
            height: 216px;
            object-fit: cover;
        }

        &-content {
            display: flex;
            flex-direction: column;
        }

        &-link {
            margin-top: auto;

            .btn-link {
                font-weight: $font-weight-bold;
                padding-left: 0;
                padding-right: 0;
            }
        }

        &-info {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: small;
            margin-bottom: 5px;
        }
    }

    .et-hover-style-zoom {
        .et-news-item > a {
            overflow: hidden;
            img {
                transition: transform .5s ease-in-out;
            }
        }
        .et-news-item:hover > a img {
            transform: scale(1.2);
        }
    }
}