/* Gallery */  

@media screen and (orientation: portrait) {
    
    .container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 20em;
        }
    
}


@media screen and (orientation: landscape) {
    
    .container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 80%;
          height: 35em;
        }
    
}


       label {
          position: absolute;
          box-sizing: border-box;
        }

        .container [class*='item'] {
          width: 25%;
          height: 25%;
          background: url() center center/cover no-repeat;
          transition: all 0.5s ease-in-out;
          z-index: 0;
        }

        .container [class*='item']:hover {
          border: 1px solid #ffa952;
          z-index: 1;
        }

        .container [class*='item']:nth-of-type(1) {
          top: 0;
          left: 0;
        }

        .container [class*='item']:nth-of-type(2) {
          top: 0;
          left: 25%;
        }

        .container [class*='item']:nth-of-type(3) {
          top: 0;
          left: 50%;
        }

        .container [class*='item']:nth-of-type(4) {
          top: 0;
          left: 75%;
        }
        .container [class*='item']:nth-of-type(5) {
          top: 25%;
          left: 0;
        }

        .container [class*='item']:nth-of-type(6) {
          top: 25%;
          left: 25%;
        }

        .container [class*='item']:nth-of-type(7) {
          top: 25%;
          left: 50%;
        }

        .container [class*='item']:nth-of-type(8) {
          top: 25%;
          left: 75%;
        }

        .container [class*='item']:nth-of-type(9) {
          top: 50%;
          left: 0;
        }

        .container [class*='item']:nth-of-type(10) {
          top: 50%;
          left: 25%;
        }

        .container [class*='item']:nth-of-type(11) {
          top: 50%;
          left: 50%;
        }

        .container [class*='item']:nth-of-type(12) {
          top: 50%;
          left: 75%;
        }

        .container [class*='item']:nth-of-type(13) {
          top: 75%;
          left: 0;
        }

        .container [class*='item']:nth-of-type(14) {
          top: 75%;
          left: 25%;
        }

        .container [class*='item']:nth-of-type(15) {
          top: 75%;
          left: 50%;
        }

        .container [class*='item']:nth-of-type(16) {
          top: 75%;
          left: 75%;
        }

        .container input {
          display: none;
        }

        .container input:checked + [class*='item'] {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
        }