.infolio-work-metro{
  .row.xxlg-marg {
    margin-left: -80px !important;
    margin-right: -80px !important;
      > * {
      padding-left: 80px !important;
      padding-right: 80px !important;
    }
  }
  .item{
    margin-top: 140px;
    .img{
      height: 480px;
      &.p-relative{
        position: relative;
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .cont{
      a,span{
        display: inline-block;
      }
      a,a:hover{
        color: inherit;
      }
      .title{
        color: #1a1a1a;
      }
      .category{
        color: #777777;
      }
    }
    .plink{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
.infolio-div-tooltip-sub {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px 14px;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 99999;
}
.infolio-div-tooltip-tit {
  display: none;
  position: absolute;
  background-color: #1a1a1a;
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 99999;
}

@media screen and (max-width: 992px){
  .infolio-work-metro {
    .row.xxlg-marg {
      margin-left: -15px !important;
      margin-right: -15px !important;
      > * {
        padding-left: 15px !important;
        padding-right: 15px !important;
      }
    }

    .item {
      margin-top: 80px;
    }
  }
}

body.tcg-dark-mode {
  .infolio-work-metro{
    .item{
      .cont{
        .title{
          color: #FFFFFF;
        }
        .category{
          color: #c6c8c9;
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body.tcg-auto-mode {
    .infolio-work-metro{
      .item{
        .cont{
          .title{
            color: #FFFFFF;
          }
          .category{
            color: #c6c8c9;
          }
        }
      }
    }
  }
}