section-title:has(+ custom-grid news-view)
{
   display: none;
}
custom-grid:has(> news-view)
{
   display: inherit;
}
news-view
{
   background: var(--kl-bg-color);
}
news-view > a:first-child
{
   position: absolute;
   left: 8px;
   top: 8px;
}
news-view > a:first-child > regular-icon
{
   width: 44px;
   height: 44px;
}
news-view .news-container 
{
   display: flex;
   flex-direction: column;
   color: var(--kl-text-color-light);
   background: var(--kl-bg-color);
}
news-view .news-container > img
{
   width: 100%;
   aspect-ratio: 1.78;
   object-fit: cover;
}
news-view[hide-banner] .news-container > img
{
   display: none;
}
news-view .news-container > .info-container
{
   padding: 16px;
}
news-view .news-container > .info-container > .date
{
   font-size: 13px;
   font-weight: 300;
   line-height: 17px;
}
news-view .news-container > .info-container > .title
{
   margin-top: 20px;
   font-size: 24px;
   font-weight: 700;
   line-height: 31px;
}
news-view .news-container > .info-container > .text
{
   margin-top: 50px;
   font-size: 16px;
   font-weight: 300;
   line-height: 21px;
}
news-view .action
{
   box-sizing: border-box;
   float: right;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: 48px;
   width: 200px;
   margin: 40px 0px;
   border-radius: var(--kl-border-radius);
   color: var(--kl-text-color-light);
   background: var(--kl-color-gradient);
}
news-view .action:after
{
   content:url(/images/icons/arrow-right-black.svg);
   width: 24px;
   height: 24px;
   margin-left: 10px;
}
news-view .action > .read
{
   font-size: 16px;
   font-weight: 700;
   line-height: 20px;
}

@media screen and (min-width: 744px)
{
   news-view
   {
      display: block;
      box-sizing: border-box;
      position: inherit;
      width: unset;
      margin-top: unset;
      background: unset;
      z-index: unset
   }
   news-view > a:first-child
   {
      position: inherit;
   }
   news-view > a:first-child > regular-icon
   {
      width: 72px;
      height: 72px;
   }
   news-view .news-container
   {
      margin-top: 20px;
      border-radius: var(--kl-border-radius);
      overflow: hidden;
   }
   news-view .news-container > img
   {
      width: 100%;
   }
   news-view .action
   {
      height: 50px;
      width: 233px;
      background: var(--kl-bg-color);
   }
   news-view .action:after
   {
      content:url(/images/icons/arrow-right-gradient.svg);
   }
   news-view .action > .read
   {
      font-size: 20px;
      line-height: 26px;

      background: var(--kl-color-gradient);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
   }
}

@media screen and (min-width: 1440px)
{
   news-view
   {
      position: relative;
      max-width: 810px;
      margin: 0px auto;
   }
   news-view > a:first-child
   {
      position: absolute;
      left: -200px;
      top: 0px;
   }
}