.CCB-2-IMG {
  display: flex;
  gap: 30px;                 /* space between images on desktop/tablet */
  align-items: stretch;
  justify-content: center;
  margin: 25px 0;            /* top and bottom margin for the whole set */
}

.CCB-2-IMG div {
  flex: 1;                   
  max-width: 50%;            
}

.CCB-2-IMG img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Large desktop screens */
@media (min-width: 1100px) {
  .CCB-2-IMG img {
    height: 500px;           
    object-fit: cover;       
  }
}

/* Medium screens */
@media (769px) and (max-width: 1099px) {
  .CCB-2-IMG div {
    max-width: 48%;          
  }
  .CCB-2-IMG img {
    height: 380px;           
    object-fit: cover;
  }
}

/* Mobile: stack full width, no gap, 25px margins per image */
@media (max-width: 768px) {
  .CCB-2-IMG {
    flex-direction: column;
    gap: 0;                  /* remove gap between stacked images */
    margin: 0;               /* reset container margin */
  }

  .CCB-2-IMG div {
    max-width: 100%;
  }

  .CCB-2-IMG img {
    width: 100%;
    height: auto;            
    object-fit: contain;     
    margin: 25px 0;          /* give each image top & bottom margin */
  }
}