.editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
  margin-top: 106px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media only screen and (min-width: 1024px) {
  .editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
    margin-top: calc(106px + 54 * (100vw - 1024px) / 576);
  }
}
@media only screen and (min-width: 1600px) {
  .editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
    margin-top: 160px;
  }
}
@media only screen and (min-width: 1024px) {
  .editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
    margin-bottom: calc(40px + 20 * (100vw - 1024px) / 576);
  }
}
@media only screen and (min-width: 1600px) {
  .editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 1024px) {
  .editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
    gap: calc(40px + 20 * (100vw - 1024px) / 576);
  }
}
@media only screen and (min-width: 1600px) {
  .editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
    gap: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .editor-styles-wrapper .is-root-container .projects-wrap, body.frontend .projects-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
.editor-styles-wrapper .is-root-container .projects-wrap:hover .project-item, body.frontend .projects-wrap:hover .project-item {
  opacity: 0.4;
}
.editor-styles-wrapper .is-root-container .projects-wrap .project-item:hover, body.frontend .projects-wrap .project-item:hover {
  opacity: 1;
}
.editor-styles-wrapper .is-root-container .project-item, body.frontend .project-item {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.editor-styles-wrapper .is-root-container .project-item img, body.frontend .project-item img {
  transition: all 0.4s ease;
  width: 100%;
}
.editor-styles-wrapper .is-root-container .project-item .project-title, body.frontend .project-item .project-title {
  display: flex;
}
.editor-styles-wrapper .is-root-container .project-item .project-title a, body.frontend .project-item .project-title a {
  color: #716960;
  font-weight: 300;
}
.editor-styles-wrapper .is-root-container .project-item .project-number, body.frontend .project-item .project-number {
  font-size: 9px;
  font-weight: 400;
  margin-top: 8px;
  margin-right: 20px;
}
@media only screen and (min-width: 1024px) {
  .editor-styles-wrapper .is-root-container .project-item .project-number, body.frontend .project-item .project-number {
    font-size: calc(9px + 2 * (100vw - 1024px) / 576);
  }
}
@media only screen and (min-width: 1600px) {
  .editor-styles-wrapper .is-root-container .project-item .project-number, body.frontend .project-item .project-number {
    font-size: 11px;
  }
}
@media only screen and (min-width: 1024px) {
  .editor-styles-wrapper .is-root-container .project-item .project-number, body.frontend .project-item .project-number {
    margin-right: calc(20px + 10 * (100vw - 1024px) / 576);
  }
}
@media only screen and (min-width: 1600px) {
  .editor-styles-wrapper .is-root-container .project-item .project-number, body.frontend .project-item .project-number {
    margin-right: 30px;
  }
}
.editor-styles-wrapper .is-root-container .project-item .project-thumb, body.frontend .project-item .project-thumb {
  margin-bottom: 10px;
}
@media only screen and (min-width: 1024px) {
  .editor-styles-wrapper .is-root-container .project-item .project-thumb, body.frontend .project-item .project-thumb {
    margin-bottom: calc(10px + 5 * (100vw - 1024px) / 576);
  }
}
@media only screen and (min-width: 1600px) {
  .editor-styles-wrapper .is-root-container .project-item .project-thumb, body.frontend .project-item .project-thumb {
    margin-bottom: 15px;
  }
}