@import "mixins";
@import "variables";

.civi-jobs-animation{
  --civi-jobs-height: 113px;
  --civi-jobs-spacing: 60px;
  --civi-jobs-item: 4;
  overflow: hidden;
  height: calc((var(--civi-jobs-height) + var(--civi-jobs-spacing)) * var(--civi-jobs-item));
  &:hover .civi-jobs-item{
    animation-play-state: paused;
  }
  .jobs-inner{
    height: calc((var(--civi-jobs-height) + var(--civi-jobs-spacing)) * (var(--civi-jobs-item) * 2));
  }
  .civi-jobs-item{
    padding: 24px;
    border-radius: 20px;
    max-width: 450px;
    -webkit-animation:translateinfinite 15s linear infinite;
    animation:translateinfinite 15s linear infinite;
    margin-top: var(--civi-jobs-spacing);
    margin-bottom: var(--civi-jobs-spacing);
  }
  .jobs-title{
    font-size: 22px;
  }
  .cate-wapprer{
    font-weight: 500;
    margin-bottom: 8px;
  }
}

@keyframes translateinfinite {
  0% {
    @include transform(translateY(0));
  }
  100% {
    @include transform(translateY(calc((var(--civi-jobs-height) + var(--civi-jobs-spacing)) * var(--civi-jobs-item) * -1)));
  }
}

@media (min-width: 1025px) {
  .civi-jobs-animation{
    .civi-jobs-item:nth-child(even){
      margin-left: 50px;
    }
  }
}