Здрасти, при сужении контента блоки слайдов не уменьшаются а вылезают за контейнер. Что не так?
<section class="section__gallery">
<div class="container">
<div class="section__gallery-wrap">
<div class="section__gallery-left-block">
<div class="section__gallery-inner-left-block">
<h2 class="section__gallery-title title-h2 white-h2">
Галерея
</h2>
<label for="" class="section__gallery-label-for-select">
Фильтр:
</label>
<select name="" id="section__gallery-select-category"
class="section__gallery-select-category">
<option value="">Живопись</option>
</select>
</div>
<div class="section__gallery-left-block-descr">
<p class="section__gallery-left-block-descr">
Вам предоставляется 10 бесплатных скачиваний. Для увеличения количества скачиваний
<a href="#" class="section__gallery-left-block-link">авторизуйтесь,</a> либо
воспользуйтесь лицензией.
</p>
</div>
</div>
<div class="section__gallery-right-block">
<div class="slider-container swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="slider-slide swiper-slide">
<a href="slide-1-img-1.jpg" class="js-smartPhoto" data-caption="Caption 1"
data-id="id-1">
<img src="img/gallery/gallery-slider/slide-1-img-1.jpg" data-group="group"
class="gallery-img">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-1-img-2.jpg" class="js-smartPhoto" data-caption="Caption 2"
data-id="id-2">
<img src="img/gallery/gallery-slider/slide-1-img-2.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-1-img-3.jpg" class="js-smartPhoto" data-caption="Caption 3"
data-id="id-3">
<img src="img/gallery/gallery-slider/slide-1-img-3.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-1-img-4.jpg" class="js-smartPhoto" data-caption="Caption 4"
data-id="id-4">
<img src="img/gallery/gallery-slider/slide-1-img-4.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-1-img-5.jpg" class="js-smartPhoto" data-caption="Caption 5"
data-id="id-1">
<img src="img/gallery/gallery-slider/slide-1-img-5.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-1-img-6.jpg" class="js-smartPhoto" data-caption="Caption 6"
data-id="id-6">
<img src="img/gallery/gallery-slider/slide-1-img-6.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-2-img-1.jpg" class="js-smartPhoto" data-caption="Caption 7"
data-id="id-7">
<img src="img/gallery/gallery-slider/slide-2-img-1.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-2-img-2.jpg" class="js-smartPhoto" data-caption="Caption 8"
data-id="id-8">
<img src="img/gallery/gallery-slider/slide-2-img-2.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-2-img-3.jpg" class="js-smartPhoto" data-caption="Caption 9"
data-id="id-9">
<img src="img/gallery/gallery-slider/slide-2-img-3.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-2-img-4.jpg" class="js-smartPhoto" data-caption="Caption 10"
data-id="id-10">
<img src="img/gallery/gallery-slider/slide-2-img-4.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-2-img-5.jpg" class="js-smartPhoto" data-caption="Caption 11"
data-id="id-11">
<img src="img/gallery/gallery-slider/slide-2-img-5.jpg" data-group="group">
</a>
</div>
<div class="slider-slide swiper-slide">
<a href="slide-2-img-6.jpg" class="js-smartPhoto" data-caption="Caption 12"
data-id="id-12">
<img src="img/gallery/gallery-slider/slide-2-img-6.jpg" data-group="group">
</a>
</div>
</div>
<!-- If we need pagination -->
<div class="slider-pagination swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="slider-btn-prev swiper-button-prev"></div>
<div class="slider-btn-next swiper-button-next"></div>
</div>
</div>
</div>
<p class="section__gallery-left-block-descr2">
Вам предоставляется 10 бесплатных скачиваний. Для увеличения количества скачиваний
<a href="#" class="section__gallery-left-block-link">авторизуйтесь,</a> либо
воспользуйтесь лицензией.
</p>
</div>
</div>
.section__gallery-wrap{
display: flex;
}
.section__gallery-left-block{
display: flex;
max-width: 400px;
flex-direction: column;
justify-content: space-between;
}
.slider-container {
max-width: 1150px;
}
.swiper-button-next, .swiper-button-prev{
top:55%
}
.swiper-button-next{
right: 0;
}
.swiper-button-prev{
left: 0;
}
.slider-slide{
max-width: 350px;
max-height: 350px;
}
.slider-slide img{
width: 100%;
height: 100%;
}
