/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 22 2026 | 17:31:37 */
.proj-carousel {
  display: flex;
  flex-direction: column;         
  gap: 16px;
}

.proj-carousel .pc-track {
  gap: 16px;                  
}

@media (min-width: 1024px) {
  .proj-carousel {
    flex-direction: row;         
  }
	
	.pc-wrap {
  height: 164px;
	}

}

.pc-wrap {
  position: relative;
  overflow: hidden;
  background: #151515;
  border-radius: 8px;
  --fade: 32px;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    #151515 var(--fade),
    #151515 calc(100% - var(--fade)),
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    #151515 var(--fade),
    #151515 calc(100% - var(--fade)),
    rgba(0,0,0,0) 100%
  );
}

@media (min-width: 1024px) {
  .pc-wrap {
    width: 276px;                    
    height: var(--pc-height, 520px); 
    --fade: 90px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      #151515 var(--fade),
      #151515 calc(100% - var(--fade)),
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      #151515 var(--fade),
      #151515 calc(100% - var(--fade)),
      rgba(0,0,0,0) 100%
    );
  }
}

.pc-track {
  display: flex;
  align-items: center;
  gap: 0;                 
  will-change: transform;
}
.pc-track {
  flex-direction: row;         
  animation: pc-scroll-x 22s linear infinite;
}

.pc-b .pc-track {
  animation-direction: reverse;
}

@media (min-width: 1024px) {
  .pc-track {
    flex-direction: column;     
    animation-name: pc-scroll-y; 
    animation-duration: 22s;
    animation-direction: normal; 
  }
  .pc-b .pc-track {
    animation-direction: reverse;
  }
}

.pc-track img {
  display: block;
  flex: 0 0 auto;
}

.pc-track img {
  height: 100%;
  width: 218px;               
  object-fit: contain;        
}

@media (min-width: 1024px) {
  .pc-track img {
    width: 100%;
    height: 276px;
    object-fit: cover;        
  }
}

@keyframes pc-scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pc-scroll-y {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-track { animation: none !important; }
}