@import 'variables';
.view-list-employee {
  font-family: @font-family-nunito-serif;
  .title{
    text-align: center;
    .name{
      color: @background-color-pink;
      font-style: normal;
      font-weight: @font-weight-bold;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .description{
      font-size: @font-size-medium;
      color: @text-color-2;
      margin-bottom: @margin-base-title-block;
    }
  }
  .wrapper-employee {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 485px;
    margin-bottom: 30px;
    border: @border-gray;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    &:hover {
      .tes-content {
        height: 209px;
        background-color: @text-color-p7;
        padding-top: 15px;
        h3.name {
          color: @text-color-4;
          margin-bottom: 5px;
        }
        .content{
          display: block;
          p{
            color: @text-color-p4;
          }
        }
        p.category{
          color: @text-color-4;
          margin-bottom: 15px;
        }
        .team-social{
          background-color: @text-color-p7;
          a{
            i{
              color: @text-color-p4;
            }
          }
        }
      }

    }
    .cover-image-service-trainer {
      width: 100%;
      height: 420px;
      position: absolute;
      top: 0;
      left: 0;
      div {
        width: 100%;
        height: 100%;
        padding-bottom: calc(100% * 420 / 380);
        position: absolute;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          object-fit: cover;
          object-position: center;
        }
      }
    }
    .tes-content {
      color: @text-color-4;
      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 88px;
      background-color: @text-color-p6;
      padding: 10px 20px 15px 20px;
      h3.name {
        color: @text-color-1;
        font-size: @font-size-h3;
        font-weight: @font-weight-semibold;
        line-height: @line-height-computed-h3;
        margin-bottom: 10px;
      }
      p.category{
        color: @text-color-2;
        font-size: @font-size-medium;
        line-height: @line-height-computed-h4;
      }
      .team-social {
        display: flex;
        background-color: @text-color-p6;
        justify-content: flex-end;
        align-items: flex-end;
        width: 50%;
        padding: 0 20px;
        position: absolute;
        bottom: 10px;
        right: 0;
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        a {
          display: inline-block;
          & + a {
            margin-left: 10px;
          }
          i {
            color: @text-color-2;
            transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
            font-size: 18px;
          }
        }
      }
      .content {
        display: none;
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        p {
          color: @text-color-2;
          font-size: @font-size-base;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          height: 68px;
          overflow: hidden;
          text-overflow: ellipsis;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            height: 61px;
          }
          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            height: 61px;
          }
          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            height: 61px;
          }
        }
      }
    }


  }
  .pagination-list-employee {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    li {
      margin: 0;
      a {
        text-decoration: none;
      }
    }
  }
}