Нужно чтоб вот эти элементы галереи уменьшались в размерах пропорционально. Какие свойства можно добавить в код?
HTML
<section class="gallery">
<div class="container">
<div class="gallery__inner">
<div class="gallery__item gallery__item-1">
<img src="images/gallery-img-1.png" alt="">
</div>
<div class="gallery__item gallery__item-2">
<img src="images/gallery-img-2.png" alt="">
</div>
<div class="gallery__item gallery__item-3">
<img src="images/gallery-img-3.png" alt="">
</div>
<div class="gallery__item gallery__item-4">
<img src="images/gallery-img-4.png" alt="">
</div>
<div class="gallery__item gallery__item-5">
<img src="images/gallery-img-5.png" alt="">
</div>
<div class="gallery__item gallery__item-6">
<img src="images/gallery-img-6.png" alt="">
</div>
<div class="gallery__item gallery__item-7">
<img src="images/gallery-img-7.png" alt="">
</div>
<div class="gallery__item gallery__item-8">
<img src="images/gallery-img-8.png" alt="">
</div>
<div class="gallery__item gallery__item-9">
<img src="images/gallery-img-9.png" alt="">
</div>
<div class="gallery__item gallery__item-10">
<img src="images/gallery-img-10.png" alt="">
</div>
<div class="gallery__item gallery__item-11">
<img src="images/gallery-img-11.png" alt="">
</div>
<div class="gallery__item gallery__item-12">
<img src="images/gallery-img-12.png" alt="">
</div>
<div class="gallery__item gallery__item-13">
<img src="images/gallery-img-13.png" alt="">
</div>
</div>
</div>
</section>
CSS
.gallery__inner {
display: grid;
grid-template-columns: 443px 197px 328px 328px 407px;
grid-template-rows: 408px 141px 188px 196px 252px;
column-gap: 10px;
}
.gallery__item img {
}
.gallery__item-1 {
grid-column-start: 1;
grid-row-start: span 2;
}
.gallery__item-2 {
grid-column-start: 2;
grid-row-start: 1;
}
.gallery__item-3 {
grid-column-start: 3;
grid-row-start: 1;
}
.gallery__item-4 {
grid-column-start: 4;
grid-row-start: 1;
}
.gallery__item-5 {
grid-column-start: 5;
grid-row-start: span 2;
}
.gallery__item-6 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 4;
margin-top: 20px;
}
.gallery__item-7 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
margin-top: 3px;
margin-left: 20px;
}
.gallery__item-8 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
margin-left: 145px;
margin-top: 17px;
}
.gallery__item-9 {
grid-column-start: 5;
grid-row-start: 3;
grid-row-end: 4;
margin-top: 135px;
}
.gallery__item-10 {
grid-column-start: 1;
grid-row-start: 4;
grid-row-end: 5;
margin-top: 143px;
}
.gallery__item-11 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
margin-top: 70px;
}
.gallery__item-12 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
margin-left: 210px;
margin-top: 25px;
}
.gallery__item-13 {
grid-column-start: 5;
grid-row-start: 4;
grid-row-end: 5;
margin-top: 210px;
}