.news {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 60px);
    justify-content: center;
    margin-top: 40px;

    &.news--single {
        grid-template-columns: minmax(0, 1fr);

        .article {
            width: min(100%, 600px);
            justify-self: center;
        }
    }

    @media (max-width: 995px) {
        grid-template-columns: 1fr;
    }

    .article {
        display: flex;
        flex-direction: column;
        align-items: center;

        .article__link {
            position: relative;
            display: block;
            color: inherit;
            text-decoration: none;
            cursor: pointer;
        }

        .content {
            .image-container {
                background-size: cover;
                background-position: center center;
                width: 100%;
                display: block;
                height: 0;
                overflow: hidden;
                position: relative;
                transition: all .5s;
                padding-bottom: 50%;
                color: var(--color-grey);

                img {
                    display: block;
                    max-width: 100%;
                    height: auto;
                    transition: transform .5s ease;
                    will-change: transform;
                }

                .overlay {
                    z-index: 1;
                    position: absolute;
                    visibility: hidden;
                    background-color: rgba(0, 0, 0, 0.5);
                    opacity: 0;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    transition: opacity .35s cubic-bezier(0.4, 0, 0.2, 1);

                    .overlay-middle {
                        width: 75%;
                        height: 100%;
                        display: table;
                        margin: auto;
                        vertical-align: middle;
                        text-align: center;
                        overflow: hidden;
                        position: relative;
                        visibility: hidden;
                        transition: opacity .35s cubic-bezier(0.4, 0, 0.2, 1);

                        .overlay-text {
                            color: var(--color-light);
                            vertical-align: middle;
                            margin: auto;
                            display: table-cell;
                        }
                    }
                }
            }

            .panel-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: var(--color-danger);
                font-size: var(--font-size-xl);
                line-height: var(--line-height-m);
                font-weight: var(--font-weight-medium);
                text-align: center;
                background-color: var(--color-light);
                min-height: 180px;
                max-height: 180px;

                .panel-body {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 15px;

                    .date {
                        font-size: var(--font-size-l);
                        font-weight: var(--font-weight-light);
                        margin-top: 10px;
                    }

                    .headline {
                        margin-top: 17.5px;
                    }
                }
            }

            #panel-container-home {
                background-color: #dcd5d5;
            }
        }
    }

    .article:hover .content .image-container img {
        transform: scale(1.1, 1.1);
    }

    .article:hover .content .image-container .overlay {
        cursor: pointer;
        visibility: visible;
        opacity: 1;
    }

    .article:hover .content .image-container .overlay-middle {
        opacity: 1;
        visibility: visible;
    }
}

#isEworldArticleSource{
    padding: 2px 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    background-color: rgb(255, 255, 255, 70%);
    color: var(--color-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-light);
}

#EworldNewsContainer{
    padding: 50px 40px 0px 40px;
    a{
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }
}

p.news-img-caption {
    text-align: right;
    font-size: 15px;
    font-style: italic;
    padding: 0 20px;
    margin: 0 0 17px;
}

.news-single .image-container {
    background: #e6e1dd;
    width: 100%;
    aspect-ratio: 2 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 992px) {
    .news-single .image-container {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px) {
    .news-single .image-container {
        aspect-ratio: 4 / 3;
    }
}
@media (max-width: 480px) {
    .news-single .image-container {
        aspect-ratio: 1 / 1;
    }
}