.background-project{
  background-image: url("../background/CS_02.jpg");
  backface-visibility: hidden;
  background-size: cover;
  pointer-events: none;
  background-position: center center;
  color: transparent;
  filter: grayscale(100%);
  height: 100vh;
  left: 0;
  opacity: 0.15;
  position: fixed;
  width: 100%;
  z-index: -1;
}

.project-container{
  position: relative;
  top: 9rem;
  margin-bottom: 9rem;
  padding: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.project-box,
.project-preview {
  width: 100%;
  max-width: 40rem;
}

.project-box {
  background-color: rgba(255, 255, 255, 0.9);
  display: block;
  margin: 2rem;
  cursor: pointer;
  transition: 0.9s;
  filter: grayscale(90%);
  aspect-ratio: 1/1;
}

.project-preview {
  display: inline-block;
  height: 100%;
  object-fit: cover;
}

.project-box:hover {
  filter: grayscale(0%);
  transition: 0.9s;
}

.project-bar {
  display: block;
  text-align: left;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.project-box:active {
  opacity: 0.8;
  transition: 0.35s;
}

.project-title {
  display: block;
  font-size: 1.5rem;    
  letter-spacing: 0.15rem;
  margin: 1.3rem;
  font-weight:500;
  text-transform: uppercase;
}

.project-note {
  font-size: 1rem;
  margin: 1.3rem;
}

.project-more {
  font-size: 2.4rem;
  margin: 1rem;
  float: right;
  font-weight: bold;
}


@media(max-width: 1280px){

  .project-title {
    font-size: 1.2rem;
    margin: 1.2rem;
  }
  
  .project-note {
    font-size: 1rem;
    margin: 1.2rem;
  }

  .project-more {
    display: none;
  }  

  .project-container{
    top: 7rem;
    padding:0.8rem 0;
  }

  .project-box {
    margin: 0.8rem 1rem;
  }
  .project-box,
  .project-preview {
  width: 100%;
  max-width: 40rem;
}
}

@media(max-width: 800px){

  .project-box {
    filter: grayscale(0%);
  }

  .project-title {
    font-size: 1rem;
    margin: 1rem;
  }
  
  .project-note {
    font-size: 0.8rem;
    margin: 1rem;
  }

  .project-box,
  .project-preview {
  width: 100%;
  max-width: 30rem;
}
}