/*===================================== COLLECTION*/

.sepdiv{
  width:100%;
  float:left;
}

.articlediv{
  margin-bottom: 10px;
  height: 360px;
  float: left;
  width: 33.33333%;
}

.articlesubdiv{
  margin: auto;
  width: 220px;
  height: 330px;
  padding: 10px!important;
  text-align: left;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #DDD;
}

.articlesubdiv:hover{
  border: 1px solid #BBB;
  padding: 9px!important;
  height: 331px;
}

.articlesubdivmob{
  margin: auto;
  width: 170px;
  height: 295px;
  padding: 10px!important;
  text-align: left;
  position: relative;
  border-radius: 16px;
  border: 1px solid #DDD;
  margin-bottom: 10px !important;
}

.img-hover-zoom {
  padding: 0px;
  margin: 0px;
  height: 200px; /* [1.1] Set it as per your need */
  width: 200px; /* [1.1] Set it as per your need */
  border-radius: 16px;
  overflow: hidden;
}

.pimg{
   -webkit-transition: transform .1s ease ;
   -moz-transition: transform .1s ease ;
   -ms-transition: transform .1s ease ;
   -o-transition: transform .1s ease ;
   transition: transform .1s ease ;
   object-fit: cover;
   width:200px;
   height:200px;
   /*border-radius: 16px;*/
}

.pimg:hover{
   /*border-radius: 44px;*/
   transform: scale(1.1);
}

.article_container{
  padding-left: 50px;
  padding-right: 50px
}

.articleheader{
   margin-top: 10px;
   margin-bottom: 0px;
   font-weight: bold;
   font-size: 16px;
   line-height: 20px;
}

.articledescription{
   margin-top: 0px;
   margin-bottom: 28px;
   font-size: 14px;
   font-size: 13px;
   line-height: 105%;
}

.articleprice{
   position: absolute;
   bottom: 0;
   font-size: 16px;
   margin-bottom: 0px;
   line-height: 100%;
   padding-bottom: 10px;
}

@media screen and (min-width: 992px) {
  .articlesubdivmob{
    width: 240px !important;
  }
}

@media screen and (max-width: 991px) {
  .articlesubdiv {
    width: 170px;
    height: 295px;
    border: 1px solid #DDD;
    margin-bottom: 10px !important;
  }
  .img-hover-zoom {
    height: 150px;
    width: 150px;
  }
  .pimg{
    width:150px;
    height:150px;
  }
  .article_container{
    padding-left: 0px;
    padding-right: 0px
  }
  .articlesubdiv:hover{
    height: 295px;
  }
  .pimg:hover{
   /*border-radius: 44px;*/
   transform: scale(1.0);
  }
}


@media screen and (max-width: 601px) {
  .articlediv {
    width:50%;
    height: 305px;
  }
}