.project-side-info {
  width: 370px;
  background-color: var(--grey);
  padding: 60px;
  & .project-item:not(:last-child) {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(112, 112, 112, 0.2);
    margin-bottom: 20px;
  }
  & .button-wrap {
    margin-top: 30px;
  }
  & .project-item:last-of-type {
    margin-bottom: 0;
  }
}
.project-img-block {
  width: calc(100% - 370px);
  position: relative;
  overflow: hidden;
}
.project-detail-content {
  width: 1050px;
  padding-right: 80px;
}

.project-link {
  display: inline-flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  & .pglink {
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    & .arrow {
      border: 1px solid #c5c5c5;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
    }
    & span {
      color: var(--dark-theme);
      text-decoration: underline;
    }
    &:hover {
      color: var(--theme);
      & .arrow {
        background-color: var(--theme);
        border-color: var(--theme);
        > img {
          filter: invert(1) brightness(10);
        }
      }
    }
  }
}

.work-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(451px, 1fr));
  grid-gap: 2rem;
  & .work-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    > img {
      width: 100%;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(12, 43, 78, 0.7) url(../images/svg/zoom-icon.svg)
        no-repeat center;
      transition: 0.5s;
      pointer-events: none;
    }
    &:hover::after {
      left: 0%;
      transform: skewX(0deg);
    }
  }
  .wide-column {
    grid-column: span 2;
  }
}

@media (max-width: 1599.98px) {
  .project-side-info {
    padding: 45px;
    & .button-wrap {
      margin-top: 20px;
    }
  }
  .project-detail-content {
    width: 80%;
    padding-right: 50px;
  }
  .work-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(30.33%, 1fr));
    gap: 20px;
  }
}

@media (max-width: 1439.98px) {
  .project-side-info {
    padding: 30px;
  }
  .project-side-info {
    & .project-item:not(:last-child) {
      padding-bottom: 15px;
      margin-bottom: 15px;
    }
  }
  .project-img-block {
    height: 510px;
    & > img {
      max-width: inherit;
      object-fit: cover;
      height: 100%;
    }
  }
  .project-detail-content {
    width: 75%;
    padding-right: 30px;
  }
}

@media (max-width: 991.98px) {
  .project-side-info {
    width: 270px;
  }
  .project-img-block {
    width: calc(100% - 270px);
  }
  .project-detail-content {
    width: 100%;
    padding-right: 0px;
  }
  .project-link {
    margin-top: 30px;
    flex: 0 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .project-img-block,
  .project-side-info {
    width: 100%;
  }
  .project-side-info {
    position: relative;
    top: inherit;
    padding: 20px;
  }
  .project-side-info {
    & .project-item:not(:last-child) {
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
  }
  .project-img-block {
    height: auto;
    & > img {
      max-width: 100%;
      object-fit: cover;
      height: auto;
    }
  }
}

@media (max-width: 576.98px) {
  .work-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    gap: 0;
  }
  .work-gallery {
    width: 100%;
    margin-bottom: 15px;
  }
  .project-link {
    & .pglink {
      gap: 15px;
      & .arrow {
        width: 35px;
        height: 35px;
      }
    }
  }
}