.article-detail {
   @media screen and (max-width: $lg - 1) {
      .col-right {
         display: none;
      }
   }

   @media screen and (min-width: $lg) {
      display: flex;
      flex-wrap: wrap;

      .col-right {
         width: 220px;
         flex: none;
      }

      .col-left {
         flex: none;
         margin-right: auto;
         width: calc(100% - 220px - 60px);
      }
   }

   @media screen and (min-width: $xl) {
      max-width: 1180px;
      margin-right: auto;
      margin-left: auto;

      .col-right {
         width: 220px;
      }

      .col-left {
         width: calc(100% - 220px - 120px);
      }
   }
}

.article-data-top {
   border-bottom: 1px solid $border-color;
   margin-bottom: 16px;
   padding-bottom: 12px;
}

.article-content {
   padding-bottom: 20px;

   p > img {
      @include img-responsive;
   }

   @media screen and (max-width: 1240px) {
      table {
         width: auto !important;
         max-width: 100%;
      }
   }
}

.articles-related {
   h3 {
      margin-bottom: 30px;
      text-align: center;
   }

   .h2 {
      font-size: $font-size-h4;
   }
}
