/*
Unlike featured post, we have each SVG shown always and we are turning them
on as needed.
 */
.featured-posts.featured-content-upgraded .red-wave,
.featured-posts.featured-content-upgraded .black-wave,
.featured-posts.featured-content-upgraded .black-circle,
.featured-posts.featured-content-upgraded .red-circle {
    display: none !important;
}

/*
The left-facing column always gets the red wave.
In one-column mode, the right-facing column should get the black wave and red circle.
In two-column mode, the right-facing column should only get the black circle.
 */
.featured-posts.featured-content-upgraded .column-left .red-wave,
.featured-posts.featured-content-upgraded.column-one .column-right .black-wave,
.featured-posts.featured-content-upgraded.column-one .column-right .red-circle,
.featured-posts.featured-content-upgraded.column-two .column-right .black-circle {
    display: block !important;;
}

.featured-posts.featured-content-upgraded.column-two .featured-posts-wrapper {
    display: block;
}

.featured-posts.featured-content-upgraded.column-two .featured-posts-wrapper .wrap {
    display: flex;
}

.featured-posts.featured-content-upgraded.column-one .featured-post-article {
    margin-top: var(--margin-l);
}

.featured-posts.featured-content-upgraded.column-one .featured-post-article:first-child {
    margin-top: 0;
}

/* When more than one row exists in a two column layout add vertical space between  */
.featured-posts.featured-content-upgraded.column-two .featured-posts-wrapper .wrap + .wrap {
    margin-top: var(--margin-l);
}

.featured-posts.featured-content-upgraded .image-wrapper-link.video-modal {
    display: block;
}

.featured-posts.featured-content-upgraded .featured-video .featured-video-link {
    background-color: var(--white);
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}


@media screen and (max-width: 767px) {
    .featured-posts.featured-content-upgraded.column-two .featured-posts-wrapper .wrap {
        display: block;
    }

    /*
    Every second row should get this. The original code had this hard-coded at only the second row.
    */
    .featured-post-article:nth-child(2) .featured-post-image {
        overflow: hidden;
        padding: 80px 0 18px 0;
    }

    /*
    For two-column mode, the right-facing should be treated as if in one column since
    that is what we're doing in responsive
    */
    .featured-posts.featured-content-upgraded.column-two .column-right .black-wave,
    .featured-posts.featured-content-upgraded.column-two .column-right .red-circle {
        display: block !important;
    }

    .featured-posts.featured-content-upgraded.column-two .column-right .black-circle {
        display: none !important;
    }
}