body {
  font-family: SilkRemington;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #ffffff;
}

h1 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 80px;
}

@font-face {
  font-family: SilkRemington;
  src: url('SilkRemington-SBold.ttf') format('truetype');
}

@media only screen and (max-width: 700px) {
  .gallery {
    display: none;
  }

  .gallery2 {
    --g: 4px; 
    
    display: grid;
    clip-path: inset(1px); 
  }
  .gallery2 > a {
    --_p: calc(-1*var(--g));
    grid-area: 1/1;
    aspect-ratio: 1;
    cursor: pointer;
    transition: .4s .1s;
  }
  .gallery2 > a:first-child {
    clip-path: polygon(0 0, calc(95% + var(--_p)) 0 , 0 calc(95% + var(--_p)))
  }
  .gallery2 > a:last-of-type {
    clip-path: polygon(95% 95%, 95% calc(0% - var(--_p)), calc(0% - var(--_p)) 95%)
  }
  .gallery2:hover > a:last-of-type,
  .gallery2:hover > a:first-child:hover{
    --_p: calc(50% - var(--g));
  }
  .gallery2:hover > a:first-child,
  .gallery2:hover > a:first-child:hover + a{
    --_p: calc(-50% - var(--g));
  }
}

@media only screen and (min-width: 701px) {
  .gallery2 {
    display: none;
  }

  .gallery {
    --g: 4px; 
    
    display: grid;
    clip-path: inset(1px); 
  }
  .gallery > a {
    --_p: calc(-1*var(--g));
    grid-area: 1/1;
    aspect-ratio: 1;
    cursor: pointer;
    transition: .4s .1s;
  }
  .gallery > a:first-child {
    clip-path: polygon(0 0, calc(100% + var(--_p)) 0 , 0 calc(100% + var(--_p)))
  }
  .gallery > a:last-of-type {
    clip-path: polygon(100% 100%, 100% calc(0% - var(--_p)), calc(0% - var(--_p)) 100%)
  }
  .gallery:hover > a:last-of-type,
  .gallery:hover > a:first-child:hover{
    --_p: calc(50% - var(--g));
  }
  .gallery:hover > a:first-child,
  .gallery:hover > a:first-child:hover + a{
    --_p: calc(-50% - var(--g));
  }
}

.center {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}