.grid {
        margin: 0 auto;
    }
    .grid-sizer,.grid-item {
        width: 100%;
    }
    .grid-item {
        float: left;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
    .grid-item a {
        cursor: -webkit-zoom-in;
        cursor: -moz-zoom-in;
        cursor: zoom-in;
    }
      .grid-item img {
        display: block;
        width: 100%;
        height: auto;
      }
      @media (max-width: 429px) {
        .grid-sizer, .grid-item { width: 100%; }
      }
      @media (min-width: 430px) and (max-width: 767px) {
        .grid-sizer, .grid-item { width: calc((100% - 1 * 10px) / 2); }
      }
      @media (min-width: 768px) and (max-width: 991px) {
        .grid-sizer, .grid-item { width: calc((100% - 2 * 10px) / 3); }
      }
      @media (min-width: 992px) and (max-width: 1199px) {
        .grid-sizer, .grid-item { width: calc((100% - 3 * 10px) / 4); }
      }
      @media (min-width: 1200px) and (max-width: 1399px) {
        .grid-sizer, .grid-item { width: calc((100% - 4 * 10px) / 5); }
      }
      @media (min-width: 1400px) {
        .grid-sizer, .grid-item { width: calc((100% - 5 * 10px) / 6); }
      }

      .fas.fa-window-close, .fas.fa-caret-square-left, .fas.fa-caret-square-right {
        border-radius:7px;
        border-left:5px solid white;
        border-right:5px solid white;
        border-top:2px solid white;
        border-bottom:2px solid white;
        background-color:white;
      }
      .fas.fa-window-close:hover, .fas.fa-caret-square-left:hover, .fas.fa-caret-square-right:hover {
        color:red;
      }
      div.sl-wrapper button:hover {
        opacity: 1;
      }
      div.sl-wrapper button.sl-close {
        right:40px;
      }