.card-image {
  display: inline-block;
  max-width: 424px;
  max-height: 607px;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background: linear-gradient(180deg, rgba(29, 29, 51, 0.00) 52.88%, rgba(29, 29, 51, 0.70) 76.35%), url(<path-to-image>) lightgray 50% / cover no-repeat;
}


.card-image__content {
  display: flex;
  flex-direction: column;

  position: relative;
}

.card-image__image {
  width: 100%;
  height: 100%;
}


.card-image__image picture{
  position: relative;
}
.card-image__image picture::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(29, 29, 51, 0.00) 52.88%, rgba(29, 29, 51, 0.70) 76.35%);
  pointer-events: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.card-image:hover picture::after{
  cursor: pointer;
  background-color: #1d1d33a2;
}
.card-image__texts {
  display: flex;
  flex-direction: column;

  position: absolute;
  bottom: 37px;

  padding: 0 30px;

  color : var(--color-white);
  z-index: 5;
}

.card-image__texts p {
  margin : 0;
}

.card-image__title p {
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 170%; /* 40.8px */
}

.card-image__text p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}