teaser-item
{
   display: flex;
   width: 100%;
   height: 556px;
   border-radius: var(--kl-border-radius);
   background: var(--kl-bg-color);
   overflow: hidden;
   cursor: pointer;
   margin-bottom: 60px;
   color: var(--kl-text-color-light);
}
@media screen and (max-width: 790px)
{
   teaser-item
   {
      height: 620px;
   }   
}
teaser-item > .info-container
{
   display: flex;
   flex-direction: column;
   flex: 1;
   padding: 25px;
   justify-content: center;
}
teaser-item > .info-container > .date
{
   font-size: 16px;
   font-weight: 300;
   line-height: 21px;
}
teaser-item > .info-container > .date:empty
{
   display: none;
}
teaser-item > .info-container > .title
{
   margin-top: 40px;
   font-size: 28px;
   font-weight: 700;
   line-height: 36px;
   height: 72px;

   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
teaser-item > .info-container > .text
{
   margin-top: 10px;
   font-size: 18px;
   font-weight: 300;
   line-height: 23px;
   max-height: 230px;

   display: -webkit-box;
   -webkit-line-clamp: 10;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
teaser-item > .info-container > .date:empty ~ .title,
teaser-item > .info-container > .date:empty ~ .text
{
   margin-top: 0;
   height: unset;
   max-height: unset;
   display: block;
   -webkit-line-clamp: unset;
   -webkit-box-orient: unset;
   overflow: unset;
   text-overflow: unset;
}
teaser-item > .info-container > .action-container
{
   display: flex;
   flex-direction: column;
   justify-content: end;
   /* flex: 1; */
   padding-bottom: 20px;
}
teaser-item > .info-container > .action-container > .action
{
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   height: 40px;
   font-size: 16px;
   font-weight: 700;
   line-height: 20px;
   text-transform: uppercase;
   color: var(--kl-color-2);
}
teaser-item > .info-container > .action-container > .action:after
{
   content:url(/images/icons/arrow-right.svg);
   width: 40px;
   height: 40px;
   margin-left: 10px;
}
teaser-item > img
{
   width: 274px;
   height: 100%;
   object-fit: cover;
}

@media screen and (max-width: 743px)
{
   teaser-item > img
   {
      display: none;
   }
   teaser-item
   {
      height: unset;
   }
}

@media screen and (min-width: 1440px)
{
   teaser-item
   {
      width: 1020px;
      margin: 0px auto 60px;
   }
   teaser-item > .info-container
   {
      padding: 78px;
   }
   teaser-item > img
   {
      width: 388px;
   }
}