* {
    box-sizing: border-box;
}
/*Lightbox gallery*/
.Lightbox {
    display: flex;
    padding: 0.5em;
}
.Lightbox-item {
    flex-basis: 25%;
    padding: 0.5em;
}

/*Lightbox functions*/
.js-lightbox-middle {
    background-color: rgba(0, 0, 0, 0.8);
    height: 100vh;
    width: 100vw;
    display: block;
    position: absolute;
    top: 0;
    z-index: 0;
    cursor: pointer;
}
 .js-lightbox-container {
      position: fixed;
      z-index: 1;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
 .js-lightbox-close {
      position: absolute;
      z-index: 1;
      top: -0.5rem;
      right: -0.5rem;
      cursor: pointer;
      background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%20357%20357%22%3E%3Cpath%20d%3D%22M357%2035.7L321.3%200%20178.5%20142.8%2035.7%200%200%2035.7l142.8%20142.8L0%20321.3%2035.7%20357l142.8-142.8L321.3%20357l35.7-35.7-142.8-142.8%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-position: 90% 51%;
      background-color: rgb(255, 255, 255);
      outline: none;
      border: 1px solid rgb(200, 200, 200);
      padding: 0.25rem 1.22rem 0.25rem 0.5rem;
      border-radius: 5px;
      font-size: 12px;
  }
.js-lightbox-close:hover {
    background-color: rgb(190, 190, 190);
  }
.js-lightbox-hide {
    display: none;
  }
.js-lightbox-next {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
}
  @media all and (max-width: 50em) {
     .js-lightbox-container {
         width: 90%;
     }
     .js-lightbox-container img {
         width: 100%;
     }
  }