:root {
    /* white card */
    --ch-card-white-bg: #FFFFFF;
    --ch-card-white-category-bg: #F7F7F5;
    --ch-card-white-category-color: #515151;
    --ch-card-white-date-color: #000000;
    --ch-card-white-title-color: #323232;
    --ch-card-white-excerpt-color: #999999;

    /* dark card */
    --ch-card-dark-bg: #12151A;
    --ch-card-dark-category-bg: #323232;
    --ch-card-dark-category-color: #FFFFFF;
    --ch-card-dark-date-color: #FFFFFF;
    --ch-card-dark-title-color: #F8CBA0;
    --ch-card-dark-excerpt-color: #FFFFFF;

    /* ch gray card */
    --ch-card-gray-bg: #353535;
    --ch-card-gray-category-bg: #000000;
    --ch-card-gray-category-color: #FFFFFF;
    --ch-card-gray-date-color: #FFFFFF;
    --ch-card-gray-title-color: #FFFFFF;
    --ch-card-gray-excerpt-color: #FFFFFF;
}


.ch-news {
    background: transparent;
    border-radius: 20px;
    color: var(--ch-card-white-excerpt-color);
    position: relative;
    overflow: hidden;
}

.ch-news:hover {
    transform: scale(1.03);
}

.ch-news .elementor-heading-title {
    color: var(--ch-card-white-title-color);
    font-family: var(--font-stack-heading);
    font-weight: 400;
    line-height: 150%;
    font-size: 25px;
}

.ch-news .ch-btn-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 44px;
    width: 47px;
}

.ch-news::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--ch-card-white-bg);
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 69px),
            calc(100% - 74px) calc(100% - 69px),
            calc(100% - 74px) 100%,
            0 100%);
    pointer-events: none;
}

.ch-news::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 88px;
    height: 85px;
    background-image: url("data:image/svg+xml;utf8,<svg width='88' height='85' viewBox='0 0 88 85' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M35.5617 42.285L23.7981 76.4719C23.0083 78.7674 21.4588 80.7696 19.3727 82.1899C17.2866 83.6102 14.7716 84.3753 12.1901 84.375C5.45822 84.375 0 79.2769 0 72.9881V15C0 6.71531 7.18963 0 16.0595 0H71.2639C80.1338 0 87.3234 6.71531 87.3234 15V16.875C87.3234 25.1597 80.1338 31.875 71.2639 31.875H50.8513C47.4513 31.8751 44.139 32.8831 41.3915 34.7539C38.644 36.6246 36.6021 39.2616 35.5617 42.285Z' fill='white'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(0.5px, 1px);
    /* without transform the svg is not aligned */
}

.ch-news .read-more p {
    font-size: 14px;
    color: #999999;
    /* same for all */
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

/* remove position: relative, so the button can be relative to the wrapper */
.ch-news .post-footer,
.ch-news .elementor-widget-shortcode {
    position: initial;
}

.ch-news .elementor-icon-list-items {
    justify-content: space-between;
}

.ch-news .elementor-icon-list-items time {
    font-size: 14px;
    color: var(--ch-card-white-date-color);
}

.ch-news .elementor-post-info__item--type-terms::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--e-global-color-primary);
    display: inline-block;
    margin-right: 5px;
}

.ch-news .elementor-post-info__item--type-terms {
    background: var(--ch-card-white-category-bg);
    padding: 5px 18px;
    font-size: 14px;
    color: var(--ch-card-white-category-color);
    text-transform: uppercase;
    border-radius: 5px;
}

.ch-news .news-content {
    margin-bottom: 40px;
}

/* diff colors depending on the order (white is default) */
/* the svg shapes are not using variables, and make sure to use %23 instad of # */

/* 1. black */
.ch-news-grid .e-loop-item:nth-of-type(3) .ch-news,
.ch-news-grid .e-loop-item:nth-of-type(4) .ch-news {
    color: var(--ch-card-dark-excerpt-color);
}

.ch-news-grid .e-loop-item:nth-of-type(3) .ch-news .elementor-heading-title,
.ch-news-grid .e-loop-item:nth-of-type(4) .ch-news .elementor-heading-title {
    color: var(--ch-card-dark-title-color);
}

.ch-news-grid .e-loop-item:nth-of-type(3) .ch-news .elementor-icon-list-items time,
.ch-news-grid .e-loop-item:nth-of-type(4) .ch-news .elementor-icon-list-items time {
    color: var(--ch-card-dark-date-color);
}

.ch-news-grid .e-loop-item:nth-of-type(3) .ch-news::before,
.ch-news-grid .e-loop-item:nth-of-type(4) .ch-news::before {
    background: var(--ch-card-dark-bg);
}

.ch-news-grid .e-loop-item:nth-of-type(3) .ch-news::after,
.ch-news-grid .e-loop-item:nth-of-type(4) .ch-news::after {
    background-image: url("data:image/svg+xml;utf8,<svg width='88' height='85' viewBox='0 0 88 85' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M35.5617 42.285L23.7981 76.4719C23.0083 78.7674 21.4588 80.7696 19.3727 82.1899C17.2866 83.6102 14.7716 84.3753 12.1901 84.375C5.45822 84.375 0 79.2769 0 72.9881V15C0 6.71531 7.18963 0 16.0595 0H71.2639C80.1338 0 87.3234 6.71531 87.3234 15V16.875C87.3234 25.1597 80.1338 31.875 71.2639 31.875H50.8513C47.4513 31.8751 44.139 32.8831 41.3915 34.7539C38.644 36.6246 36.6021 39.2616 35.5617 42.285Z' fill='%2312151A'/></svg>");
}

.ch-news-grid .e-loop-item:nth-of-type(3) .ch-news .elementor-post-info__item--type-terms,
.ch-news-grid .e-loop-item:nth-of-type(4) .ch-news .elementor-post-info__item--type-terms {
    background: var(--ch-card-dark-category-bg);
    color: var(--ch-card-dark-category-color);
}

/* 2. gray */
.ch-news-grid .e-loop-item:nth-of-type(2) .ch-news,
.ch-news-grid .e-loop-item:nth-of-type(6) .ch-news {
    color: var(--ch-card-gray-excerpt-color);
}

.ch-news-grid .e-loop-item:nth-of-type(2) .ch-news .elementor-heading-title,
.ch-news-grid .e-loop-item:nth-of-type(6) .ch-news .elementor-heading-title {
    color: var(--ch-card-gray-title-color);
}

.ch-news-grid .e-loop-item:nth-of-type(2) .ch-news .elementor-icon-list-items time,
.ch-news-grid .e-loop-item:nth-of-type(6) .ch-news .elementor-icon-list-items time {
    color: var(--ch-card-gray-date-color);
}

.ch-news-grid .e-loop-item:nth-of-type(2) .ch-news::before,
.ch-news-grid .e-loop-item:nth-of-type(6) .ch-news::before {
    background: var(--ch-card-gray-bg);
}

.ch-news-grid .e-loop-item:nth-of-type(2) .ch-news::after,
.ch-news-grid .e-loop-item:nth-of-type(6) .ch-news::after {
    background-image: url("data:image/svg+xml;utf8,<svg width='88' height='85' viewBox='0 0 88 85' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M35.5617 42.285L23.7981 76.4719C23.0083 78.7674 21.4588 80.7696 19.3727 82.1899C17.2866 83.6102 14.7716 84.3753 12.1901 84.375C5.45822 84.375 0 79.2769 0 72.9881V15C0 6.71531 7.18963 0 16.0595 0H71.2639C80.1338 0 87.3234 6.71531 87.3234 15V16.875C87.3234 25.1597 80.1338 31.875 71.2639 31.875H50.8513C47.4513 31.8751 44.139 32.8831 41.3915 34.7539C38.644 36.6246 36.6021 39.2616 35.5617 42.285Z' fill='%23353535'/></svg>");
}

.ch-news-grid .e-loop-item:nth-of-type(2) .ch-news .elementor-post-info__item--type-terms,
.ch-news-grid .e-loop-item:nth-of-type(6) .ch-news .elementor-post-info__item--type-terms {
    background: var(--ch-card-gray-category-bg);
    color: var(--ch-card-gray-category-color);
}

/* 3. big horizontal */
.ch-news.big {
    color: var(--ch-card-dark-excerpt-color);
}

.ch-news.big .elementor-widget-image {
    flex: 0 0 45%;
}

.ch-news.big .elementor-widget-image img {
    aspect-ratio: 777 / 540;
    border-radius: 20px;
}

.ch-news.big .elementor-heading-title {
    color: var(--ch-card-dark-title-color);
    font-size: 30px;
}

.ch-news.big .elementor-icon-list-items time {
    color: var(--ch-card-dark-date-color);
}

.ch-news.big::before {
    background: var(--ch-card-dark-bg);
}

.ch-news.big::after {
    background-image: url("data:image/svg+xml;utf8,<svg width='88' height='85' viewBox='0 0 88 85' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M35.5617 42.285L23.7981 76.4719C23.0083 78.7674 21.4588 80.7696 19.3727 82.1899C17.2866 83.6102 14.7716 84.3753 12.1901 84.375C5.45822 84.375 0 79.2769 0 72.9881V15C0 6.71531 7.18963 0 16.0595 0H71.2639C80.1338 0 87.3234 6.71531 87.3234 15V16.875C87.3234 25.1597 80.1338 31.875 71.2639 31.875H50.8513C47.4513 31.8751 44.139 32.8831 41.3915 34.7539C38.644 36.6246 36.6021 39.2616 35.5617 42.285Z' fill='%2312151A'/></svg>");
}

.ch-news.big .elementor-post-info__item--type-terms {
    background: var(--ch-card-dark-category-bg);
    color: var(--ch-card-dark-category-color);
}

.ch-news.big .ch-btn-icon {
    right: -20px;
    bottom: -20px;
}

.ch-news .elementor-widget-theme-post-excerpt p {
    font-size: .95rem;
}

@media screen and (max-width: 1023px) {
    .ch-news.big .ch-btn-icon {
        right: 0;
        bottom: 0;
    }
    .ch-news.big .elementor-widget-image img {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}