.news-body {
    margin:0;
    padding:0;
    background:#f5f7fb;
    color:#18202f;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

.news-main {
    max-width:1200px;
    margin:0 auto;
    padding:70px 20px 100px;
}

.news-header {
    max-width:800px;
    margin:0 auto 55px;
    text-align:center;
}

.news-header-h1 {
    margin:0 0 18px;
    font-size:clamp(40px,6vw,68px);
    line-height:1.02;
    letter-spacing:-3px;
    color:#111827;
}

.news-header-p {
    margin:0 auto;
    max-width:720px;
    font-size:18px;
    line-height:1.8;
    color:#6b7280;
}

.news-featured {
    width:100%;
    max-width:1050px;
    min-height:430px;
    margin:0 auto 70px;
    border-radius:28px;
    overflow:hidden;
    background:#111827;
    box-shadow:0 25px 60px rgba(143, 134, 145, 0.41);
    position:relative;
    display:flex;
    align-items:center;
}

.news-featured-date {
    color:#9ca3af;
    font-size:14px;
    font-weight:600;
}

.news-featured-title {
    margin:0 0 20px;
    color:white;
    font-size:clamp(32px,5vw,52px);
    line-height:1.08;
    letter-spacing:-2px;
}

.news-featured-description {
    margin:0;
    color:#d1d5db;
    font-size:17px;
    line-height:1.8;
    max-width:650px;
                
}

.news-featured-clickable {
    cursor:pointer;
    color:#ffffff;
    font-size:14px;
    font-weight:800;
    list-style:none;
    outline:none;
    margin-top:10px;
}

.news-featured-content {
    margin:20px 0 0;
    max-width:850px;
    color:#d1d5db;
    font-size:15px;
    line-height:1.85;
}

.news-featured-bubble {
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    background:#6d3c8e;
    color:#ffffff;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.9px;
    margin-bottom:18px;
}

.news-featured-circle {
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:#6d3c8e;
    opacity:.16;
    right:-160px;
    top:-150px;
}

.news-featured-circleoutline {
    position:absolute;
    width:200px;
    height:200px;
    border-radius:50%;
    border:1px solid rgba(90, 0, 78, 0.66);
    right:70px;
    bottom:-160px;
}

.featured-images {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 330px;
    height: 330px;
}

.featured-image-circle {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.featured-image-circle:first-child {
    left: 0;
    top: 20px;
}

.featured-image-circle:last-child {
    right: 0;
    bottom: 20px;
}

.featured-image-circle img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Hide the images on smaller screens so they don't clash with the text */
@media (max-width: 900px) {
    .featured-images {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 220px;
        margin-top: 30px;
    }

    .featured-images img {
        width: 150px;
        height: 150px;
    }
}