article {
  position:absolute; top:20vh; left:30vw;
  width:40vw;
  color:#333;
  h1, p {
    margin:10px;
  }
  h1 {
    font-size:1.2rem
  }
  p {
    font-size:0.9rem;
    line-height:1.4;
  }
}

.gallery {
	margin:auto;
  width:10%;
  height:5vh;
  display:grid;
  grid-auto-flow:column;
  grid-auto-rows:10vh;
  place-content:start center;
  z-index:1;
  transition:all 1s;
  position:relative;
  top:5vh;
  &:hover {
    background:linear-gradient(transparent, hsla(0,0%,100%,0.5), transparent);
    height:95vh;
    width:100%;
  }
 
  .galPic {
	  cursor:pointer;
    font:0.8em monospace;
    position:static;
    display:block;
    width:5ch;
    height:5ch;
    display:grid; place-content:center;
    background:hsla(0,0%,100%,0.5); color:#333;
    text-decoration:none;
    border-bottom:thin solid black;
    box-sizing:border-box;
    
    &:hover {
      background:hsla(0,0%,0%,0.5);
      color:#eee;
      border-bottom:0 none;
    }
  
    img {
      display:block;
      position:absolute; top:0; left:0; z-index:-1;
      width:100%;
      
      object-fit:cover;
      object-position:center;
      clip-path:polygon(
        50% 0,
        50% 0,
        50% 100%,
        50% 100%,
        50% 0,
        50% 0,
        50% 100%,
        50% 100%
      );
      transition:clip-path 0.3s ease-in;
    }
    
    &:hover img, img:hover {
      clip-path:polygon(
        50% 0,
        0 0,
        0 100%,
        50% 100%,
        50% 0,
        100% 0,
        100% 100%,
        50% 100%
      );
    }
  }
}


article {transition:filter 0.5s}
.g:hover + article {
  filter:blur(3px)
}