.news-holder p {
    font-size: 24px;
    color: #fff;
    text-align: right;
}

.news-holder * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.news-headlines {
  list-style: none;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  gap:30px;
  padding: 20px;
  box-sizing: border-box;
}
.news-headlines a{
  color:#fff;
}
  .news-headlines li {
    position: relative;
    z-index: 20;
    font-size: 15px;
    background: none !important;
    border: none !important;
    top:0 !important;
    height: auto !important;
  }
  
  .news-headlines li:hover, a:hover {
      cursor: pointer;
  }
  
  .news-headlines .highlight:before {
    display: none;
  }
  .news-headlines li::after{
    opacity: 0;
    transition: all 0.3s ease;
  }
  .news-headlines .selected::after{
    opacity: 1;
  }

.news-headlines {
   float: left;
   width: 40%;
}

.news-preview {
   float: left;
   width: 60%;
   background: #ededed;
   min-height: 300px;
   height: 100% !important;
   position: relative;
   overflow: hidden;
}
.news-content:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: linear-gradient(
90deg, rgb(180, 187, 197) 0%, rgb( 180 187 197 / 50%) 30%, rgb(180 187 197 / 30%) 50%, rgb(180 187 197 / 10%) 80%, rgb(180 187 197 / 5%) 90%, rgb(180 187 197 / 0%) 100%);
}
.news-content {
    position: absolute;
    z-index: 10;
    top: 0;
    left: -200%;
    width: 100%;
    align-items: center;
    border-radius: 0 10px 10px 0;
    background-size: cover;
    background-position: center;
    height: 100%;
    transition: all 0.5s ease;
}
.news-content .info {
 display: none;
 padding: 10px;
 box-sizing: border-box;
 max-width: 70%;
}
.news-content .info small{
  color:#fff;
}
.news-content::before{
  content: '';
  background: linear-gradient(to left, rgb(0 0 0 / 50%) 0 ,rgb(0 0 0 / 43%) 60%,rgb(0 0 0 / 55%) 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: -1;
 display: none;
}
.top-content {
  display: flex;
  left:0;
}
.top-content::before,.top-content::after{
 display: block;
}
.top-content .info {
 display: block;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}