.grid-rj {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1600px) {
  .grid-rj {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1000px) {
  .grid-rj {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .grid-rj {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*++++++++++++++++++++++++++++++
      RJ CARD
++++++++++++++++++++++++++++++++*/
.rj-card {
  border-radius: var(--radious-prim);
  background: var(--bg-100);
  border: 1px solid rgba(255, 255, 255, 0);
  transition: var(--Ltrns);
}
.rj-card:hover {
  border: var(--border-100);
  border-color: var(--secoundry);
}
.rj-card .img-box {
  width: 100%;
  overflow: hidden;
}
@supports (-webkit-overflow-scrolling: touch) {
  .rj-card .img-box {
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }
}

.rj-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--Ltrns);
  aspect-ratio: 1/1;
  position: relative;

  /* // Fallback */
  @supports not (aspect-ratio: 1/1) {
    &::before {
      float: left;
      padding-top: 100%;
      content: "";
    }

    &::after {
      display: block;
      content: "";
      clear: both;
    }
  }
}

.rj-card:hover img {
  transform: scale(1.1);
}

.rj-card .content-box {
  padding: 0.9rem;
}
.rj-card .content-box .title {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: var(--primary);
}
.rj-card .content-box .social-list {
  list-style: none;
  display: flex;
}
.rj-card .content-box .social-list > *:not(:last-child) {
  padding-right: 1rem;
}
.rj-card .content-box .social-list a {
  color: var(--text-200);
  font-size: 0.8rem;
  transition: var(--Etrns);
}
.rj-card .content-box .social-list a:hover {
  color: var(--secoundry);
}

@media (max-width: 1350px) {
  .rj-card {
    --rj-card-h: 320px;
  }
}
@media (max-width: 1024px) {
  .rj-card {
    --rj-card-h: 290px;
  }

  .rj-card .overlay-box .title {
    font-size: 1.1rem;
  }
}
@media (max-width: 480px) {
  .rj-card {
    --rj-card-h: 250px;
  }
}