#workGrid {
          width: 100%;
          max-width: 960px;
          margin: 2em auto 10em;
          
        }
        #workGrid .work-group {
          display: flex;
          gap: 12px;
          margin: 0 auto 1em;
          justify-content: center;
          flex-wrap: wrap;
        }
/*        #workGrid .work-group:hover .work-item:not(:hover) {
          filter: grayscale(1);
        }
*/        .work-item {
          background-color: var(--orange);
          color: #fff;
          transition: all .5s;
          width: 240px;
          height: 340px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .work-item:before {
          content: '';
          width: 60px;
          height: 60px;
          border-radius: 60px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 47 7.1'%3E%3Cline class='arrow-line' stroke='%23000' x1='40.5' y1='3.6' x2='1' y2='3.6'/%3E%3Cpolygon class='arrow-head' fill='%23000' points='46 3.6 39 1 39 6.1 46 3.6'/%3E%3C/svg%3E");
          background-repeat: no-repeat no-repeat;
          background-position: center center;
          background-size: 80%;
          background-color: #fff9;
          position: absolute;
          top: 20px;
          right: 20px;
          mix-blend-mode: lighten;
          rotate: -30deg;
          transition: rotate.5s;
        }
        .work-item:hover:before {
          rotate: 0deg;
        }
        .work-item:hover {
          z-index: 1000;
          transform: translateX(25%);
          z-index: 2;
          overflow:unset;
        }
        .work-item .image {
          aspect-ratio: 3 / 2;
          position: absolute;
          top: 0;
          right: 0;
          width:240px;
        }
        .work-item:hover .image {
          aspect-ratio: 2 / 3.395;
          right: 100%;
          width: 200px;
        }
        .work-item figure {
          margin: 0;
          width: 100%;
          height: 100%;
          mix-blend-mode: soft-light;
        }
        .work-item figure img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: grayscale(1);
        }
        .work-item:hover figure {
          mix-blend-mode: normal;
        }
        .work-item:hover figure img {
          filter: grayscale(0);
        }
        .work-item .text {
          padding: 1em;
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: absolute;
          top: 160px;
        }
        .work-item:hover .text {
          top: 0;
          height: 100%;
        }
        .work-item .text p {
          line-height: 1.2;
          margin-top: 1em;
        }
        .work-item .text p:has(span){
          opacity: 0;
          display: none;
        }
        .work-item:hover .text p:has(span){
          opacity: 1;
          display: initial;
        }
        .work-item .text p.title {
          font-family: var(--accent-font);
          font-size: 1.2em;
          line-height: 1;
          margin: 0;
        }
        .work-item:hover .text p.title {
          font-size: 1.4em;
        }
        .work-item .text p.excerpt {
          display: none;
        }        
        .work-item:hover .text p.excerpt {
          display: block;
        }
        @media all and (max-width:450px) {
          .work-item:before {
            top: unset;
            bottom: 20px;
          }
          .work-item:hover {
            transform: translateX(0);
          }
          .work-item:hover .image {
            aspect-ratio: 3 / 2;
            position: absolute;
            top: 0;
            right: 0;
            width:240px;
          }
          .work-item figure {
            mix-blend-mode: normal;
          }
          .work-item figure img {
            filter: grayscale(0);
          }
          .work-item:hover .text {
            top: 160px;
            height: unset;
          }
          .work-item:hover .text.work-item .text {
            height: unset;
          }
          .work-item .text p:has(span){
            opacity: 1;
            display: initial;
          }
          .work-item:hover .text p.title {
            font-size: 1.2em;
          }

        }