:root{
    --hex-width: 200pt;
    --hex-height: 200pt;
    --border-width: 200px;
    --border-height: 200px;
    --hexrightpad: 60pt;
    --hextoppad: calc(10vh + var(--header-height));
  }
  
  .galleryWrapper{
    height:100%;
    width:100%;
    position:relative;
  }
  .gallery{
    position:relative;
    height:100%;
    width:100%;

    overflow: hidden;
  }
  
  .gallery:after{
    content:'';
  }
  
  .hex-img{
    width:var(--hex-width);
    height:var(--hex-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:3px;

     background:gray;
     height: var(--hex-height);
     width:var(--hex-width);
     transition:transform 0.3s;
     position:absolute;
     right: var(--hexrightpad);
     top: var(--hextoppad);
  }
  
  .clipped-border:before{
    content:'';
    position:absolute;
    opacity:0.3;
    width:455px;
    height:90px;
    background:white;
    top: calc(var(--hex-height) / 20);
    left: calc(var(--hex-width) / 2);
    z-index:1;
    transform:rotate(45deg);
    transition:transform 1s;
  }
  
  .clipped-border:hover:before{

    --translation-x-end: calc(var(--hex-width) / 7 * -6);
    --translation-y-end: calc(var(--hex-height) / 7 * 5);
    transform: translate(var(--translation-x-end), var(--translation-y-end)) rotate(45deg);
    transition:transform 0.7s;
  }
  
  .clipped-border:nth-child(2){
    top: calc(var(--hextoppad) + var(--hex-height) / 1.25);
    right: calc(var(--hexrightpad) + var(--hex-width) / 2.12);
  }
  
  .clipped-border:nth-child(3){
    top: var(--hextoppad);
    right: calc(var(--hexrightpad) + var(--hex-width) * 0.95 );
  }
  
  
  #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.1);
    transition:transform 0.5s;
    z-index:10;
  }
  
  
  /* Mobile Responsiveness*/
  @media only screen and (max-width: 30cm) and (orientation : portrait) {
    :root{
      --hex-width: 500px;
      --hex-height: 500px;
      --border-width: 200px;
      --border-height: 200px;
      --hexrightpad: 20%;
      --hextoppad: 25%;
    }

    .clipped-border:nth-child(3){
      top: calc( var(--hextoppad) + var(--hex-height) * 1.6);
      right: calc(var(--hexrightpad));
    }
  }

/*Tablets in landscape mode*/
@media only screen and (max-width: 40cm) and (min-width: 20cm) and (max-height: 30cm) and (orientation : landscape){
  :root{
    --hex-width: 200pt;
    --hex-height: 200pt;
    --hextoppad: calc(var(--header-height) + 10pt);
    --hexrightpad: 10pt;
  }

  .clipped-border:nth-child(3){
    top: var(--hextoppad);
    right: calc(var(--hexrightpad) + var(--hex-width) * 0.95 );
  }
}

/*Tablets in portrait mode */
@media only screen and (max-width: 35cm) and (min-width: 15cm) and (max-height: 45cm) and (orientation : portrait){

  :root{
    --hex-width: 230pt;
    --hex-height: 230pt;
    --hextoppad: 130pt;
    --hexrightpad: 100pt;
  }
}