/* Make the card flexible */
.sp-card-block {
  display: flex;
  flex-wrap: wrap; /* allow items to stack on small screens */
  border-bottom: 4px solid #005e60; /* thickness adjustable */
  padding-bottom: 0.75rem;          /* space above the line */
  margin-bottom: 1.5rem;            /* space between cards */
}

/* Default (xs <576px): stack full width */
.sp-card-block .img-block,
.sp-card-block .text-content-block {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Small devices (≥576px): still stacked */
@media (min-width: 576px) {
  .sp-card-block .img-block,
  .sp-card-block .text-content-block {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Medium devices (≥768px): side by side, 4/12 vs 8/12 split */
@media (min-width: 768px) {
  .sp-card-block .img-block {
    flex: 0 0 33.3333%;   /* 4/12 */
    max-width: 33.3333%;
  }
  .sp-card-block .text-content-block {
    flex: 0 0 66.6667%;   /* 8/12 */
    max-width: 66.6667%;
  }
}

/* Large devices (≥992px): keep same ratio */
@media (min-width: 992px) {
  .sp-card-block .img-block {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .sp-card-block .text-content-block {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
}

.sp-card-title {
  color: #005e60 !important;
  font-weight: 600;   /* semi-bold */
  font-size: 1.1rem;  /* slightly larger */
}

/* Add bottom accent line */
.sp-card-block::after {
  content: "";
  display: block;
  width: 80%;              /* adjust: 50%..100% */
  height: 4px;             /* thickness */
  background-color: #005e60;
  margin: 0.75rem auto 0;  /* space + centered */
  border-radius: 2px;      /* rounded edges */
}