:root{
  --width: 100%;
  --height: 100%;
  --border-width: 200px;
  --border-height: 200px;

}

html,body{
  background:radial-gradient(#black);
  height:100%;
  width:100%;
  position:relative;
  overflow:hidden;
}

.gallery{
  position:relative;
  height:100%;
  width:100%;
}

.gallery:after{
  content:'';
}


img{
  width:var(--width);
  height:var(--height);
}

.clipped-border{
  -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%);
   padding:5px;
   background:linear-gradient(grey,lightgrey);
   width:var(--border-width);
   height:var(--border-height);
   max-height:250px;
   max-width:250px;
   height: var(--height);
   width:var(--width);
   transition:transform 0.2s;
   position:absolute;
   cursor:pointer;
   top:392px;
   left:235px;
/* erster drite reihe*/

}



.clipped-border:before{
  content:'';
  position:absolute;
  opacity:0.5;
  width:350px;
  height:70px;
  background:white;
  top:0;
  left:0;
  z-index:1;
  transform:rotate(45deg);
  transition:transform 0.5s;
}

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

.clipped-border:nth-child(2){
  top:196px;
  left:118px;
  /* erster zweite reihe */
}

.clipped-border:nth-child(3){
  top:0;
  left:235px;
/* Erster erste Reihe*/	
}

.clipped-border:nth-child(4){
  top:196px;
  left:355px;
/* zweiter zweite Reihe*/
}

.clipped-border:nth-child(5){
  top:0;
  left:470px;
/*zweiter erste Reihe */
}



.clipped-border:nth-child(6){
  top:392px;
  left:470px;
/* zweiter dritte reihe */
}

.clipped-border:nth-child(7){
  top:196px;
  left:590px;
/* dritter zweite reihe*/
}


#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%);

}

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


@media screen and (max-width:100%){
  .clipped-border{
    width:100px;
    height:100px;
  }
  
  .clipped-border:nth-child(2){
    top:0;
    left:100px;
  }
  
  .clipped-border:nth-child(3){
    left:200px;
  }
  
  .clipped-border:nth-child(4){
    top:82px;
    left:50px;
  }
  
  .clipped-border:nth-child(5){
    top:82px;
    left:150px;
}
  .clipped-border:nth-child(6){
    top:164px;
    left:50px;
  }

  .clipped-border:nth-child(7){
    top:164px;
    left:150px;
  }

}