.infolio-portfolio-fixed{
  .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5) !important;
    margin-left: calc(var(--bs-gutter-x) * -.5) !important;
    .rest{
      margin: 0 !important;
      padding: 0 !important;
    }
  }
  a,span{
    display: inline-block;
  }
  .left{
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .img{
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .4s linear;
    opacity: 0;

    &:first-of-type{
      opacity: 1;
      z-index: 1;
    }

    &:nth-of-type(2){
      z-index: 2;
    }

    &:nth-of-type(3){
      z-index: 3;
    }

    &:nth-of-type(4){
      z-index: 4;
    }

    &:nth-of-type(5){
      z-index: 5;
    }

    &:nth-of-type(6){
      z-index: 6;
    }

    &:nth-of-type(7){
      z-index: 7;
    }

    &:nth-of-type(8){
      z-index: 8;
    }

    &:nth-of-type(9){
      z-index: 9;
    }

    &:nth-of-type(10){
      z-index: 10;
    }

    &.current{
      opacity: 1;
    }
  }

  .right{
    padding: 250px 100px;
    overflow: hidden;
  }

  .cont{
    .category{
      color: #14cf93;
    }
    h2{
      color: #1a1a1a;
    }
    p{
      color: #777777;
    }
    margin-bottom: 300px;
    opacity: .1;
    transition: all .4s;
    &:last-of-type{
      margin-bottom: 0;
    }

    &.active{
      opacity: 1;
    }

    .img-hiden{
      display: none;
    }
    .rmore{
      position: relative;
      z-index: 3;
      a,a:hover{
        color: inherit;
      }
      color: #1a1a1a;
      svg{
        fill: #1a1a1a;
      }
      &:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.12);
        border-right-color: transparent;
        transition: all .4s;
        z-index: -1;
      }

      &:hover{
        color: #1a1a1a;
        &:after{
          transform: translateY(-50%) rotate(360deg);
        }
      }
    }
  }

  .current{

    &.cont{
      opacity: 1;
    }
  }
}
@media screen and (max-width: 992px) {
  .infolio-portfolio-fixed .cont{
    opacity: 1 !important;
    margin-bottom: 80px;
    padding: 0 15px;
  }
  .infolio-portfolio-fixed .left {
    display: none;
  }
  .infolio-portfolio-fixed .cont .img-hiden {
    display: block;
    margin-bottom: 30px;
  }
}

body.tcg-dark-mode {
  .infolio-portfolio-fixed{
    .cont{
      h2{
        color: #FFFFFF;
      }
      p{
        color: #c6c8c9;
      }
      .rmore{
        color: #FFFFFF;
        svg{
          fill: #FFFFFF;
        }
        &:after{
          border-color: rgba(255,255,255,.12);
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body.tcg-auto-mode {
    .infolio-portfolio-fixed{
      .cont{
        h2{
          color: #FFFFFF;
        }
        p{
          color: #c6c8c9;
        }
        .rmore{
          color: #FFFFFF;
          svg{
            fill: #FFFFFF;
          }
          &:after{
            border-color: rgba(255,255,255,.12);
          }
        }
      }
    }
  }
}