body{
    margin:1em 0 0 0;
    font-family:sans-serif;
    font-size:16px;
    line-height:24px;
    color:#333;
  }
  *{
    box-sizing:border-box;
  }
  img{
    max-width:100%;
  }
  .gallery-wrapper{
    max-width:960px;
    width:100%;
    /* margin:0 auto; */
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    padding:0 1em;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    grid-gap: 1em;
    .image-wrapper{
      a{
        padding:0.5em;
        display:block;
        width:100%;
        text-decoration:none;
        color:#333;
        box-shadow:0 0 5px rgba(0,0,0,0.3);
        transition: all 200ms ease-in-out;
        &:hover{
          box-shadow:0 2px 5px rgba(0,0,0,0.5);
        }
        img{
          width:100%;
        }
      }
    }
  }
  
  .gallery-lightboxes{
    .image-lightbox{
      position:fixed;
      top:0;
      left:0;
      width:100vw;
      height:100vh;
      background:rgba(0,0,0,0.8);
      backdrop-filter: blur(5px);
      display:flex;

      /* align-items:center; */
      justify-content: center; 
      opacity:0;
      visibility:hidden;
      transition: opacity 0ms ease-in-out;
      &:target{
        opacity:1;
        visibility:visible;
        .image-lightbox-wrapper{
          opacity:1;
          transform:scale(1,1) translateY(0);
        }
      }
      .image-lightbox-wrapper{
        transform:scale(0.95,0.95) translateY(-30px);
        transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
        opacity:0;
        margin:1em auto;
        max-width:75%;
        padding:.5em;
        /* display:inline-block; */
        margin-top: 12%;
        margin-bottom: 10%;
        position:relative;
        .close{
          width: 1.5em;
          height: 1.5em;
          background: #000;
          color: #fff;
          font-weight: bold;
          text-decoration: none;
          border-radius: 50%;
          box-shadow: 0 0 0 2px white inset, 0 0 5px rgba(0, 0, 0, 0.5);
          position: absolute;
          right: -1em;
          top: -1em;
          &:before{
            content: '';
            display: block;
            width: 10px;
            height: 2px;
            background: #fff;
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -1px 0 0 -5px;
            transform: rotate(-45deg);
          }
          &:after{
            content: '';
            display: block;
            width: 10px;
            height: 2px;
            background: #fff;
            margin: 0;
            position: absolute;
            top: 55%;
            left: 50%;
            margin: -1px 0 0 -5px;
            transform: rotate(45deg);
          }
        }
        .arrow-left{
          position:absolute;
          top:0;
          right:50%;
          bottom:0;
          left:0;
          &:before{
            content:'';
            display:inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            border-bottom: 0;
            border-right: 0;
            border-radius:4px 0 0 0;
            position: absolute;
            top: 45%;
            right: 100%;
            cursor:pointer;
            transform: rotate(-45deg) translateY(-50%);
          }
        }
        .arrow-right{
          position:absolute;
          top:0;
          right:0;
          bottom:0;
          left:50%;
          &:before{
            content:'';
            display:block;
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            border-bottom: 0;
            border-left: 0;
            border-radius:0 4px 0 0;
            position: absolute;
            top: 45%;
            left: 100%;
            cursor:pointer;
            transform: rotate(45deg) translateY(-50%);
          }
        }
        img{
          margin:0 auto;
          max-height:70vh;
        }
     
      }
    }
  }

  @media only screen and (max-width: 480px) {
    /* body {
      background-color: lightblue;
    } */
    .image-lightbox-wrapper {
       display: flex;
       justify-content: center;
       align-items: center;
    }
    .arrow-left{

        margin-top: 45%;

    }

    .arrow-right{

        margin-top: 45%;

    }
    .close {

        margin-top: 80%;
    }
  }