:root{
  --width: 290px;
  --height: 290px;
  --border-width: 290px;
  --border-height: 200px;
}

.students {
  display: block;
  padding: 60px 0px 60px 0px !important;
  height: 375px;
  background-color: var(--bg-color-light);
  margin: 120px 0px 30px;
}

.students h2 {
  font-size: 96px;
  line-height: 86px;
  margin-top: 40px;
}

.students .gallery{
  position:relative !important;
  height:100% !important;
  width:100% !important;
  top: -100px;
}

.students .gallery:after{
  content:'';
}

.students .gallery .shadow-gallery{
  position: absolute;
  top: 460px;
  left: 0px;
  width: 700px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(rgba(0,0,0,0.26),rgba(0,0,0,0) 70%);
}

.students .gallery img{
  width:var(--width) !important;
}

.students .gallery .clipped-border{
   padding: 5px;
   background:linear-gradient(grey,lightgrey);
   width:var(--border-width) !important;
   height:var(--border-height) !important;
   max-height: 250px;
   max-width: 250px;
   transition:transform 0.2s;
   position:absolute;
   cursor:pointer;
   border-radius: 8px;
   overflow: hidden;
   z-index:1 !important;
}

.students .gallery .clipped-border:after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index:0 !important;
}

.students .gallery .clipped-border:before{
  content:'';
  position:absolute;
  /*opacity:0.5;*/
  width:350px;
  height:80px;
  background: radial-gradient(rgba(255,255,255,0.76),rgba(255,255,255,0.02) 60%);
  top:0;
  left:0;
  z-index:1;
  transform:rotate(32deg);
  transition:transform 0.5s;
  overflow: hidden;
}

.students .clipped-border:hover:before{
  transform: translate(-100px,400%) rotate(32deg);
  transition:transform 0.5s;
}

.students .clipped-border:nth-child(1){
  transform: rotate(-1.6deg);
}

.students .clipped-border:nth-child(2){
  top:226px;
  left:118px;
  transform: rotate(-1deg);
}

.students .clipped-border:nth-child(3){
  top:0;
  left:275px;
  transform: rotate(3deg);
}

.students .clipped-border:nth-child(4){
  top:226px;
  left:393px;
  transform: rotate(2deg);
}

.students .clipped-border:nth-child(5){
  top:0;
  left:550px;
  transform: rotate(-1.3deg);
}

.students #clipped {
-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);

}

.students .clipped-border:hover{
  transform:scale(1.2);
  transition:transform 0.2s;
  z-index:10;
}

@media screen and (max-width:1367px){
  .students h2 {
    font-size: 82px;
    line-height: 72px;
  }
}

@media (max-width:576px){
  .shadow-gallery {
    display: none !important;
  }

  .students {
    display: block;
    padding: 0px !important;
    height: fit-content;
    margin: 40px 0px 0px;
  }

  .students .gallery {
    position:relative !important;
    height: fit-content !important;
    width: 100% !important;
    top: unset;
    display: block;
  }

  .students h2 {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 50px;
  }

  .students .clipped-border{
    width: 100vw;
    max-width: 100vw !important;
    height:auto;
    max-height: auto !important;
    
  }
  
  .students .clipped-border:nth-child(1), .students .clipped-border:nth-child(2), .students .clipped-border:nth-child(3), .students .clipped-border:nth-child(4),.students .clipped-border:nth-child(5){
    width: 96vw;
    position: inherit;
    display: block;
    top: unset;
    left: unset;
    transform: rotate(0deg);
    margin: 0 auto;
    margin-bottom: 16px;
  }
  
}