.horizontal-card {
   align-items: center;
   background-color: var(--main-0, #FFFFFF);
   border-radius: 2px;
   display: flex;
   gap: 20px;
   min-width: 340px;
   overflow: hidden;
   position: relative;
}

.horizontal-card .article {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 10px;
}

.horizontal-card.primary .time {
   color: var(--secondary-blue-1000, #009EFF);
   font-weight: 600;
}

.horizontal-card .time {
   color: var(--secondary-blue-1000, #009EFF);
   font-family: Inter, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-weight: 400;
   line-height: 120%;
   /* 12px */
}

.horizontal-card .excerpt {
   color: var(--main-900, #1A1A1A);
   font-size: var(--font-size-h-6);
   line-height: 120%;
   line-clamp:4;
   -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;   
}

.horizontal-card:hover .excerpt {
    color: var(--secondary-blue-1000);
}

.horizontal-card .image-wrapper {
   border-radius: 2px;
   flex-shrink: 0;
   height: 120px;
   overflow: hidden;
   width: 120px;
  position:relative;
  line-height:0;
}

.horizontal-card .image-wrapper:after {
    content: "";
    width: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: absolute;
    mix-blend-mode: hard-light;
    background: linear-gradient(90deg, rgba(0, 158, 255, 0.00) 48.63%, rgba(0, 158, 255, 0.60) 74.69%);
    transition: all 0.3s ease;
}
.horizontal-card:hover .image-wrapper:after {width:100%}

.horizontal-card img {
   aspect-ratio: 1 / 1;
   border-radius: 2px;
   height: 120px;
   object-fit: cover;
   width: 120px;
}

.horizontal-card .live {
   align-items: center;
   display: flex;
   gap: 5px;
   position: absolute;
   right: 10px;
   top: 10px;
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.4);
   }

   100% {
      transform: scale(1);
   }
}

.horizontal-card .live span {
   color: var(--secondary-red, #FF0000);
   font-size: 10px;
   font-style: normal;
   font-weight: 400;
   line-height: 120%;
   text-transform: uppercase;
}

.horizontal-card .live svg {
   animation: pulse 2s infinite;
   position: relative;
}

.horizontal-card-swiper-nav {
   align-items: center;
   display: flex;
   gap: 10px;
}

.horizontal-card-swiper-button-prev,
.horizontal-card-swiper-button-next {
   background-image: url('../../assets/img/slider-nav.svg');
   background-repeat: no-repeat;
   background-size: cover;
   cursor: pointer;
   height: 16px;
   width: 16px;
}

.horizontal-card-swiper-button-next {
   transform: rotate(180deg);
}

.horizontal-card-swiper-button-prev:hover,
.horizontal-card-swiper-button-next:hover  {
    background-image: url(../../assets/img/slider-nav-b.svg);
}

.horizontal-card-swiper .swiper-slide {
   min-width: 340px;
}

.horizontal-card:hover img {
   transform: scale(1.05);
}

.horizontal-card .excerpt,
.horizontal-card img {
   transition: all 0.3s ease;
}

.horizontal-card:focus img {transform: scale(1.05);}
.horizontal-card:focus .image-wrapper:after{width: 100%;}
.horizontal-card:focus .excerpt {color: var(--secondary-blue-1000);}