.art-gallery {  
  .projects-section {
    display: flex;
    flex-direction: column;
  
    .all-projects {
      display: flex;
      justify-content: space-between;
      padding-top: 50px;
  
      .projects-names {
        height: fit-content;
      }
  
      .projects-names ul {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
  
        & li {
          display: flex;
          gap: 15px;
          align-items: center;
          opacity: 0.5;
          transition: opacity 0.35s cubic-bezier(0.86, 0, 0.07, 0.995);
  
          &:hover {
            opacity: 1;
  
            .arrow-down {
              clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
          }
  
          .arrow-down {
            transition: clip-path 0.35s cubic-bezier(0.86, 0, 0.07, 0.995),
              -webkit-clip-path 0.35s cubic-bezier(0.86, 0, 0.07, 0.995);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          }
  
          & a {
            line-height: 2;
          }
        }
  
        & li.is-active {
          opacity: 1;
  
          .arrow-down {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          }
        }
      }
  
      .group-hover {
        &:hover .overflow-hidden,
        &:hover .overflow-hidden > img {
          transform: scaleX(var(--scale-x)) scaleY(var(--scale-y));
        }
      }
  
      .projects-miniatures {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 39.5px;
        width: 65%;
  
        .project-miniature {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 15px;
  
          .overflow-hidden {
            overflow: hidden;
            border-radius: var(--border-radius);
            --scale-x: 0.95;
            --scale-y: 0.95;
            transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
  
            & img {
              --scale-x: 1.1;
              --scale-y: 1.1;
              transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
            }
          }
        }
      }
    }
  } 
}

@media screen and (width <= 768px) {
  .art-gallery {

    .projects-section {

      .all-projects {
        padding-top: unset;

        .projects-names {
          display: none;
        }

        .projects-miniatures {
          width: 100%;
          grid-template-columns: repeat(1, minmax(0, 1fr));
          gap: 30px 0;
        }
      }
    }
  }
}