.project-parallax{
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.project-card{
    width: calc(100% / 4);
    position: relative;
    background-image: none!important;
    background: var(--orange);
    padding: 0px!important;
}

.project-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.project-card .card-title {
  position: relative;
  bottom: 0vh;
  right: 0vh;
  color: var(--white);
  margin: 0;
  text-align: right;
  pointer-events: none;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(100vw * 0.25) var(--gap) var(--gap) var(--gap);
  z-index: 1;
}
.project-card .card-title-text {
  transform: translate(0, 0%);
  font-size: 1.3rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: calc(var(--logo-padding) * 0.5);
}
.project-card:hover .card-title-text{
  transform: translate(0, -20%);
}
.project-card .read-mode {
  opacity: 0;
  font-size: 1rem;
  font-weight: 300;
}
.project-card:hover .read-mode {
  opacity: 1;
}

.project-card .orange-filter{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--wp--preset--color--primary);
    opacity: .85;
    transition: .75s ease;
}

.project-card .orange-filter:hover{
    opacity: 0;
}

.project-card{
  transition: none!important;
}

.project-card:nth-of-type(1){
    transform: translateY(25%);
}

.project-card:nth-of-type(2){
    transform: translateY(35%);
}

.project-card:nth-of-type(3){
    transform: translateY(45%);
}

.project-card:nth-of-type(4){
    transform: translateY(35%);
}







@media (max-width: 1024px) {
  .project-parallax{
    flex-wrap: wrap;
  }
  .project-card{
    height: calc(100vw * 0.25 + 10vh);
    width: calc(100% / 2);
  }
  .project-card:nth-of-type(1){
    transform: translateY(0%);
  }

  .project-card:nth-of-type(2){
      transform: translateY(0%);
  }

  .project-card:nth-of-type(3){
      transform: translateY(0%);
  }

  .project-card:nth-of-type(4){
      transform: translateY(0%);
  }

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {
  .project-parallax{
    display: flex;
    flex-wrap: nowrap;
    width: 100vw;
    overflow: scroll;
    flex-direction: row;
    scroll-snap-type: mandatory;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0px);
  }

  .project-card{
    margin: 0 15px 0 0rem;
    min-width: calc(100vw / 1.5);
    min-height: calc(100vw * 0.25 + 10vh);
    display: flex;
    position: relative;
    transform: none !important;
    border-radius: 15px;
    overflow: hidden;
    scroll-snap-align: start;
  }

  .project-card:first-of-type{
    margin: 0 15px;
  }
  .project-card .card-title {
    position: absolute;
    bottom: 0vh;
    right: 0vh;
  }
  .project-card .card-title-text {
    font-size: 1rem;
  }
  .project-parallax{
    padding-bottom: 2rem;
  }
}