<div id="colademo_valaskuda">
<figure>
<img src="Ссылка на изображение cinderella.jpg">
<figcaption>Это поможет вам правильно</figcaption>
</figure>
<figure>
<img src="Ссылка на изображение belle.jpg">
<figcaption>Подход, ориентированный</figcaption>
</figure>
<figure>
<img src="Ссылка на изображение mulan_2.jpg">
<figcaption>Вы должны особенностях</figcaption>
</figure>
<figure>
<img src="Ссылка на изображение sleeping-beauty.jpg">
<figcaption>Вы создавать категории</figcaption>
</figure>
<figure>
<img src="Ссылка на изображение snow-white.jpg">
<figcaption>Таксономия продуктов относится</figcaption>
</figure>
<figure>
<img src="Ссылка на изображение 4273/ariel.jpg">
<figcaption>Демографические таксономии</figcaption>
</figure>
</div>

#colademo_valaskuda {
-webkit-column-width: 235px;
-webkit-column-width: 235px;
-webkit-column-gap: 15px;
-webkit-column-gap: 15px;
width: 100%;
padding: 15px;
}
#colademo_valaskuda:hover figure:not(:hover) {
opacity: 0.3;
background: #0e0e0e;
}
#colademo_valaskuda figure {
background: #e8e8e8;
border: 1px solid #a9a3a3;
box-shadow: 0 1px 2px rgb(35 31 31 / 31%);
margin: 0 2px 14px;
padding: 12px;
padding-bottom: 8px;
-moz-transition: all .4s ease-in-out;
display: inline-block;
-webkit-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
article figure {
text-align: center;
}
figure {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
#colademo_valaskuda small {
font-size: 1rem;
float: right;
text-transform: uppercase;
color: #a79f9f;
}
#colademo_valaskuda figure img {
width: 100%;
height: auto;
border-bottom: 1px solid #c1b7b7;
padding-bottom: 15px;
margin-bottom: 5px;
}
#colademo_valaskuda figure figcaption {
font-size: 0.8rem;
color: #2f2c2c;
margin: 0;
line-height: 1.5;
text-align: left;
}
article figcaption {
font-size: 1rem;
text-align: center;
margin: 1rem;
}
@media screen and (max-width: 750px) {
#colademo_valaskuda { column-gap: 0px; }
#colademo_valaskuda figure { width: 100%; }
}