.sca-grid {
  display: grid;
  gap: 30px;
}

.sca-card {
  position: relative;
  width: 100%;
  height: 355px;
  cursor: pointer;
}

/* IMAGE */
.sca-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 52px!important;
  z-index: 2;
  transition: transform var(--speed) cubic-bezier(.645,.045,.355,1);
}

/* FRONT */
.sca-front {
  position: absolute;
  inset: 0;
  background: #f4f4f5;
  border-radius: 52px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  z-index: 2;
  border: 2px solid var(--hover-color);
  transition: transform var(--speed);
}

/* SLIDE BG */
.sca-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hover-color);
  transform: translateY(100%);
  transition: transform var(--speed);
  z-index: 0;
}

/* CONTENT */
.sca-title {
    position: relative;
    z-index: 1;
    font-size: 35px;
    color: #111;
    transition: color 0.3s;
    line-height: 43px;
}

.sca-icon {
  position: relative;
  z-index: 1;
  align-self: flex-end;
}

/* HOVER */
.sca-card:hover .sca-image {
  transform: translateY(-80%) rotate(5deg);
}

.sca-card:hover .sca-front {
  transform: rotate(-2deg);
}

.sca-card:hover .sca-front::before {
  transform: translateY(0);
}

.sca-card:hover .sca-title {
  color: #fff;
}

/* mobile resposive */
@media (max-width: 600px) {
  .sca-title {
      font-size: 26px;
      line-height: 36px;
  }
  .sca-front {
        padding: 24px;
        justify-content: center;
    }
    
    .sca-card {
        position: relative;
        width: 100%;
        height: 260px;
        cursor: pointer;
    }
}