¿Por qué se fusionan los elementos?

Es porque se debe definir una mediaquery para tamaños de pantallas específicos, entonces si haces una mediaquery en vez de 768 la defines que en tamaños de 1000 px los iconos de los cursos sean mas pequeños o el tamaño del contenedor de las imágenes sean también mas pequeños, se ajustara el contenido a dicha regla que le especificas. no solo debes hacer una mediaquery, puedes usar varias para solucionar este tipo de problemas.

yo lo que hice fue colocar un width de 100% y un margin de 1.33% arriba y abajo y 0 a los lados a la clase .contenidoPrincipal-cursos-link para que se vieran en una sola linea. también se pueden modificar para que se vean mas pequeños separados por márgenes per entonces tendrías que modificar las reglas que ellos colocaron en la hoja de estilos principal. si te das cuenta hicieron una dos mediaquery donde le colocan márgenes a varios de los elementos y a otros no. por eso se pegan. porque no todos tienen un margen igual. unos tienen márgenes izquierdos y otros tienen márgenes derechos.

Christian José gracias por compartir