/* @group News
------------------------------------ */

.news {
    padding-top: 2.5rem;
    color: var(--dark-purple);
}

/* Title Row 
------------------ */
.news .title-row {
    padding-block: 2.5rem 5rem;
}
.news .title-row a {
    font: inherit;
    text-decoration: underline;
}

/* News Row 
------------------ */
.news .news-row .news-col  {
    padding-block: 3rem;
    border-top: 1px solid var(--dark-purple);
}
.news .news-row .news-col:last-of-type {
    border-bottom: 1px solid var(--dark-purple);
}
.news .news-row .news-col .img-box {
    height: 18.3rem;
    margin: 0;
}
.news .news-row .news-col .has-heading-3-font-size {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.news .news-row .news-col .has-heading-4-font-size span:not(:last-of-type)::after {
    content: '|';
    font-weight: 300;
    display: inline-block;
    vertical-align: text-top;
    margin-inline: 1rem .75rem;
}
.news .news-row .news-col .bp-button {
    --desktop-w: 1rem;
    --color-text-hover: var(--white);
}
.news .news-row .news-col .bp-button p {
    font-weight: 500;
}

@media only screen
and (min-width : 961px) {
    .news {
        padding-top: 9.2rem;
    }
    /* Title Row 
    ------------------ */
    .news .title-row p {
        max-width: 37rem;
    }
    /* News Row 
    ------------------ */
    .news .news-row .news-col {
        display: flex;
        justify-content: space-between;
    }
    .news .news-row .news-col :is(.img-box) {
        flex: 0 1 25%;
    }
    .news .news-row .news-col .text-box {
        flex: 0 1 60%;
        padding-inline: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .news .news-row .news-col .has-heading-3-font-size {
        -webkit-line-clamp: 2;
    }
    .news .news-row .news-col .bttn-box {
        flex: 0 1 14%;
    }
    .news .news-row .news-col .bttn-box .bp-button {
        width: 100%;
        justify-content: center;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    /* Title Row 
    ------------------ */
    .news .title-row .has-heading-2-font-size {
        margin: 0 0 1rem;
    }
    /* News Row 
    ------------------ */
    .news .news-row .news-col .img-box {
        margin: 0 0 1.2rem;
    }
    .news .news-row .news-col :is(.has-heading-3-font-size, .has-heading-4-font-size) {
        margin: 0 0 1.2rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .news :is(.title-row, .news-row) {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .news.animateActive :is(.title-row, .news-row) {
	animation: fadeUp var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .news.animateActive :is(.title-row) {
    --delay: 0.3s;
}
:where(#wrapper) .news.animateActive :is(.news-row) {
    --delay: 0.5s;
}