:root {
  --gridline-width: 2px;
  --gridline-color: #00c3ff;
  --spacing-vertical: 1fr 100vh 1fr;
  --spacing-horizontal: 1fr 100vw 1fr;
}

body {
  height: 100vh;
  overflow: hidden;
  background-color: #0a0a0a;
}

.grid {
  position: relative;
  display: grid;
  grid-template-rows: var(--spacing-vertical);
  grid-template-columns: var(--spacing-horizontal);
  transition-property: grid-template-rows, grid-template-columns;
  transition-property: grid-template-rows, grid-template-columns, -ms-grid-rows, -ms-grid-columns;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  height: 100%;
}
.grid__background {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  visibility: hidden;
}
.grid__background.visible {
  visibility: visible;
}
.grid__cell {
  position: relative;
  border-style: solid;
  border-color: var(--gridline-color);
}
.grid__cell--top, .grid__cell--bottom {
  grid-column-start: 2;
  border-left-width: var(--gridline-width);
  border-right-width: var(--gridline-width);
}
.grid__cell--left {
  grid-column-start: 1;
}
.grid__cell--left, .grid__cell--right {
  border-top-width: var(--gridline-width);
  border-bottom-width: var(--gridline-width);
}
.grid__cell--central {
  border-width: var(--gridline-width);
}