// typicky výpis na home a v articles.tpl

.article {
   display: flex;
   margin-bottom: 25px;

   .content {
      flex: none;
      padding-left: 60px;
      padding-top: 20px;
      width: 50%;
   }

   .title {
      line-height: $line-height-sm;
      margin-bottom: 4px;

      a {
         @include underline-hover;
      }
   }

   .data {
      color: $text-muted;
      display: flex;
      align-items: center;

      span + span::before {
         content: "|";
         display: inline-block;
         margin-left: 6px;
         margin-right: 6px;
      }
   }

   .descr {
      display: block;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: 3 * 1em * 1.875;
      line-height: 1.875;
      margin-bottom: 8px;
   }

   &.article-lg {
      margin-bottom: 70px;
   }

   @media screen and (max-width: $xl - 1) {
      .content {
         padding-left: 35px;
         padding-top: 0;
         width: 60%;
      }

      .title {
         font-size: 20px;
      }

      &.article-lg {
         margin-bottom: 30px;

         .title {
            font-size: 28px;
         }
      }
   }

   @media screen and (max-width: $md - 1) {
      display: block;
      margin-bottom: 0;

      img {
         width: 100%;
      }

      .content {
         width: 100%;
         padding: 20px;
      }

      &.article-lg {
         margin-bottom: 0;

         .title {
            font-size: 20px;
         }
      }
   }

   @media screen and (max-width: $xs - 1) {
      margin: 0 -10px;
   }
}
