li:nth-child(2) a {
  font-size: 120%;
  font-weight: bolder;
}

.container_work {
  background-color: #f7f7f7;
  margin: 2em auto 3em;
  width: 85vw;
  height: 80vh;
  padding: 1vw;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[8];
      grid-template-columns: repeat(8, 1fr);
  -ms-grid-rows: (1fr)[6];
      grid-template-rows: repeat(6, 1fr);
  grid-gap: 1vw;
}

.box_a {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
}

.box_b {
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 3/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
}

.box_c {
  -ms-grid-column: 5;
  -ms-grid-column-span: 2;
  grid-column: 5/7;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-row: 1/5;
}

.box_d {
  -ms-grid-column: 7;
  -ms-grid-column-span: 2;
  grid-column: 7/9;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-row: 1/5;
}

.box_e {
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1/5;
  -ms-grid-row: 3;
  -ms-grid-row-span: 4;
  grid-row: 3/7;
}

.box_f {
  -ms-grid-column: 5;
  -ms-grid-column-span: 4;
  grid-column: 5/9;
  -ms-grid-row: 5;
  -ms-grid-row-span: 2;
  grid-row: 5/7;
}

.box_a,
.box_b,
.box_c,
.box_d,
.box_e,
.box_f {
  background-color: darkgrey;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.box_a img,
.box_b img,
.box_c img,
.box_d img,
.box_e img,
.box_f img {
  height: 100%;
  width: 100%;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -o-object-fit: cover;
     object-fit: cover;
}

.box_a .overlay,
.box_b .overlay,
.box_c .overlay,
.box_d .overlay,
.box_e .overlay,
.box_f .overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.box_a:hover img,
.box_b:hover img,
.box_c:hover img,
.box_d:hover img,
.box_e:hover img,
.box_f:hover img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-filter: grayscale(20%);
          filter: grayscale(20%);
}

.box_a:hover .overlay,
.box_b:hover .overlay,
.box_c:hover .overlay,
.box_d:hover .overlay,
.box_e:hover .overlay,
.box_f:hover .overlay {
  background-color: rgba(129, 129, 129, 0.4);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 1;
  position: absolute;
}

.box_a:hover .overlay .overlaybox,
.box_b:hover .overlay .overlaybox,
.box_c:hover .overlay .overlaybox,
.box_d:hover .overlay .overlaybox,
.box_e:hover .overlay .overlaybox,
.box_f:hover .overlay .overlaybox {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: rgba(189, 189, 189, 0.849);
  height: 80%;
  width: 80%;
  padding: 1vw;
  overflow: auto;
}

.box_a:hover .overlay .overlaybox a,
.box_b:hover .overlay .overlaybox a,
.box_c:hover .overlay .overlaybox a,
.box_d:hover .overlay .overlaybox a,
.box_e:hover .overlay .overlaybox a,
.box_f:hover .overlay .overlaybox a {
  height: 100%;
  width: 100%;
}

.box_a:hover .overlay .overlaybox h3,
.box_b:hover .overlay .overlaybox h3,
.box_c:hover .overlay .overlaybox h3,
.box_d:hover .overlay .overlaybox h3,
.box_e:hover .overlay .overlaybox h3,
.box_f:hover .overlay .overlaybox h3 {
  font-size: 12px;
  color: white;
  margin: 0;
}

.box_a:hover .overlay .overlaybox p,
.box_b:hover .overlay .overlaybox p,
.box_c:hover .overlay .overlaybox p,
.box_d:hover .overlay .overlaybox p,
.box_e:hover .overlay .overlaybox p,
.box_f:hover .overlay .overlaybox p {
  font-size: 8px;
  color: white;
}

.box_a:hover .overlay .overlaybox a,
.box_b:hover .overlay .overlaybox a,
.box_c:hover .overlay .overlaybox a,
.box_d:hover .overlay .overlaybox a,
.box_e:hover .overlay .overlaybox a,
.box_f:hover .overlay .overlaybox a {
  text-decoration: none;
  color: white;
}

.box_a,
.box_b {
  -webkit-animation-name: fromtop;
          animation-name: fromtop;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

.box_c,
.box_d {
  -webkit-animation-name: fromright;
          animation-name: fromright;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

.box_e {
  -webkit-animation-name: fromleft;
          animation-name: fromleft;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

.box_f {
  -webkit-animation-name: frombottom;
          animation-name: frombottom;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

@-webkit-keyframes fromtop {
  0% {
    top: -100%;
  }
  100% {
    top: 0%;
  }
}

@keyframes fromtop {
  0% {
    top: -100%;
  }
  100% {
    top: 0%;
  }
}

@-webkit-keyframes fromright {
  0% {
    right: -100%;
  }
  100% {
    right: 0%;
  }
}

@keyframes fromright {
  0% {
    right: -100%;
  }
  100% {
    right: 0%;
  }
}

@-webkit-keyframes frombottom {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0%;
  }
}

@keyframes frombottom {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0%;
  }
}

@-webkit-keyframes fromleft {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}

@keyframes fromleft {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}

@media screen and (max-width: 1024px) {
  .container_work {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: (1fr)[6];
        grid-template-rows: repeat(6, 1fr);
    height: 1500px;
    grid-gap: 5vw;
  }
  .box_a,
  .box_b,
  .box_c,
  .box_d,
  .box_e,
  .box_f {
    -webkit-animation-name: fromleft;
            animation-name: fromleft;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
  }
  .box_a img,
  .box_b img,
  .box_c img,
  .box_d img,
  .box_e img,
  .box_f img {
    height: 100%;
    width: 100%;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    -o-object-fit: cover;
       object-fit: cover;
  }
  @-webkit-keyframes fromleft {
    0% {
      left: -100%;
    }
    100% {
      left: 0%;
    }
  }
  @keyframes fromleft {
    0% {
      left: -100%;
    }
    100% {
      left: 0%;
    }
  }
  .box_a {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    grid-column: 1/-1;
  }
  .box_b {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    grid-column: 1/-1;
  }
  .box_c {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    grid-column: 1/-1;
  }
  .box_d {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4/5;
    grid-column: 1/-1;
  }
  .box_e {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5/6;
    grid-column: 1/-1;
  }
  .box_f {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    grid-row: 6/7;
    grid-column: 1/-1;
  }
}
/*# sourceMappingURL=work.css.map */