<div id="ctn_conte_dinamico_my_gallery">	
		
	<div class="ctn_imagen_compartir_redes">
		<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
			<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" width="250">
			<figcaption class="adorno">
				<p>Fig.1 - París de noche (Enero de 2016)</p>
			</figcaption>
		</figure>	
	</div>		
		
	<div class="ctn_imagen_compartir_redes">
		<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
			<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" width="250">
			<figcaption class="adorno">
				<p>Fig.1 - París de noche (Enero de 2016)</p>
			</figcaption>
		</figure>	
	</div>		
		
	<div class="ctn_imagen_compartir_redes">
		<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
			<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" width="250">
			<figcaption class="adorno">
				<p>Fig.1 - París de noche (Enero de 2016)</p>
			</figcaption>
		</figure>	
	</div>		
		
	<div class="ctn_imagen_compartir_redes">
		<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
			<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" width="250">
			<figcaption class="adorno">
				<p>Fig.1 - París de noche (Enero de 2016)</p>
			</figcaption>
		</figure>	
	</div>		
		
	<div class="ctn_imagen_compartir_redes">
		<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
			<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" width="250">
			<figcaption class="adorno">
				<p>Fig.1 - París de noche (Enero de 2016)</p>
			</figcaption>
		</figure>	
	</div>		
</div>
	#ctn_conte_dinamico_my_gallery {width: 100%;display: flex;Justify-content: Space-between;
    Flex-wrap: wrap;    padding: 10px 20px;}
	
	#ctn_conte_dinamico_my_gallery figure img:hover { opacity: 0.8; }
	
	#ctn_conte_dinamico_my_gallery .ctn_imagen_compartir_redes { width: calc((100% - 30px)/4);
    flex: none;box-sizing: border-box;margin-bottom: 30px; display: flex;justify-content: center;
    flex-wrap: wrap; background-color: #52250B;  color: #fff;}
	
	#ctn_conte_dinamico_my_gallery figure {width: 100%;border-top: 4px solid #52250B;}
	#ctn_conte_dinamico_my_gallery figure a {/* width: 100%; */ color: #fff;}
	#ctn_conte_dinamico_my_gallery img {width: 100%;max-width: 100%;display: flex;margin: 0 auto;}
	#ctn_conte_dinamico_my_gallery figcaption { font-size: 20px;
    text-align: center; width: 100%; font-weight: 500; display: flex; justify-content: space-between;  }
	
	#ctn_conte_dinamico_my_gallery figcaption p { display: flex;text-align: center;margin: 0 auto;padding: 10px;}
	
	#ctn_conte_dinamico_my_gallery .adorno::after {content: ""; bottom: 0; right: 0;
    border-style: solid;  border-width: 0 0 30px 30px;  border-color: transparent transparent #FFB24E transparent;}
	
	@media all and (min-width: 600px) and (max-width: 1280px) {
		  #ctn_conte_dinamico_my_gallery .ctn_imagen_compartir_redes { width: calc((100% - 200px)/4) !important;
    		height: auto /*315px !important*/;margin-bottom: 20px !important; }
	}
	
	@media all and (max-width: 400px) {
		#ctn_conte_dinamico_my_gallery .ctn_imagen_compartir_redes {width: calc((90%)/2);}
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.