/*List*/
.section-article{
  margin-top: 10px;
}

.article-image-one{
  object-fit: cover; height:auto; width:100%;
}

.article-image{
  object-fit: cover; height:auto; width:100%;
}


.article-hover-zoom {
  overflow: hidden;
}

.article-hover-zoom img {
  transition: transform .90s ease;
}


.article-text-one .article-text-two img {
  transform: scale(1.5);
}

.article-gradient-one{
  position:absolute;
  bottom:0px; 
  background-image: linear-gradient(rgb(255, 255, 255, 0), rgba(0, 0, 0, 0.9));
  height:60vh; width:100%;
}

.article-gradient-two{
  position:absolute;
  bottom:0px; left:0px; 
  background-image: linear-gradient(rgb(255, 255, 255, 0), rgba(0, 0, 0, 0.8));
  height:50vh; width:100%;
}

.article-text-one{
  position:absolute; 
  bottom:5vh; left: 15vh;
  height:auto; width:80%;
}
.article-text-one h1{
  font-size:60px; color:#FFF; line-height: 50px;
}
.article-text-one h3{
  padding-top:30px; font-weight:300;
  font-size:18px; color:#BABABA; 
}

.article-text-two{
  position:absolute; 
  bottom:3vh; left: 5vh;
  height:auto; width:80%;
}
.article-text-two h1{
  font-size:22px; color:#FFF; line-height: 25px;
}
.article-text-two h3{
  padding-top:10px; font-weight:300;
  font-size:16px; color:#BABABA; 
}

.article-content{
  width:100%;background-color:#1D1B1B;color:#FFF;padding:25px;
}

.article-content:hover{
  border-bottom:5px solid #8319AD;
}
.article-img{
  height:280px;
}
.article-desc{
  padding-top:20px;
  color:#BABABA;font-size:14px; font-weight:300;
}

.article-date{
  padding-top:20px;
  color:#BABABA;font-size:14px; font-weight: 300;
}

/*detail*/
.bread-art{
  color:#444444;padding-left:10px;margin-bottom:40px;
}
.row-display {
    display: flex;  justify-content: space-between;  flex-direction: column;  height: 60vh; margin-bottom:20px
}
.cont-article{
    height:60vh;
}
.col-title{
    padding-right:10px;
}
.col-title h1{
    font-weight:bold;font-size:55px; line-height:48px
}
.col-title .caption{
    padding:40px 60px 40px 0px; color:#777777; font-size:24px; line-height:28px; font-weight: 350;
}
.col-image{
    position:absolute;right:0px;
}
.col-image img{
    width:100%;height:60vh;padding-left:50px;object-fit: cover;
}
.col-author{
    color:#777777;font-size:20px; font-weight: 300;
}
.col-desc{
  color:#D1D1D1;font-size:18px; font-weight: 350;
}

@media only screen and (max-width: 768px) {
  /*list*/ 
  .section-article{
    margin-top: 30px;
  }
  .article-image-one{
    object-fit: cover; height:44vh; 
  }

  .article-image{
    object-fit: cover; height:44vh; 
  }

  .article-text-one{
    bottom:2vh; left: 2vh;
    height:auto; width:90%;
  }
  .article-text-one h1{
    font-size:22px; line-height: 22px;
  }
  .article-text-one h3{
    padding-top:10px;
    font-size:14px; font-weight: 400;
  }
  .article-text-two{
    position:absolute; 
    bottom:2vh; left: 2vh;
    height:auto; width:80%;
  }
   .article-text-two h1{
    font-size:22px; line-height: 22px;
  }
  .article-text-two h3{
    padding-top:10px;
    font-size:14px; font-weight: 400;
  }
  

  /*detail*/
  .row-display {
     height: auto;
  }
  .cont-article{
      height:auto;
  }
  .col-title{
      padding-right:10px;
  }
  .col-title h1{
      font-weight:bold;font-size:25px; line-height:28px
  }
  .col-title .caption{
      padding:10px 20px 10px 0px; color:#777777; font-size:16px; line-height:20px;
  }
  .col-image{
      position:relative;right:5px;
  }
  .col-image img{
      width:100%;height:auto;padding-left:10px;
  }
  .col-author{
    padding-top:10px;
      font-size:14px
  }
  
    
}