Aleksander911

.slide-active {
tranform: scale(...)
}

или

.swiper-slide {
tranform: scale(меньше 1);
}
.swiper-slide.slide-active {
tranform: scale(1);
}

Решил вопрос без js
.section {
position: -webkit-sticky;
position: sticky;
top: 0;
}

В общем сам решил вопрос @alex_keysi и freeExec пнули прям под зад куда надо.

Решил вопрос. Может кому нибудь пригодится, подправил js:

$("form").each(function() {
	    var formID = $(this).attr('id'),
		formNm = $('#' + formID + '[data-form-validate="true"]');
	 
	formNm.validate({		 
		errorPlacement: function(error, element) {
            if (element.attr("name") == "checkeds") {

                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
            return true;
        },
		highlight: function(element) {
			$(element).parent().addClass("error-check");
		},
		unhighlight: function(element) {
			$(element).parent().removeClass("error-check");
		},
         rules: {
             name: {
                 required: true,
                 minlength: 2
             },
            
			 field: {
			  required: true,
			  number: true,
			  minlength: 11
			},
			checkeds: {
                required: true
            },
             subject: {
                 required: true
             }
         },
		  messages: {
			 name: {
			 required: "Не заполненное поле",
			 minlength: "Введите не менее 2-х символов"
			 },
			 field: {
			 required: "Не заполненное поле",
				minlength: "11-значный номер телефона",
				number:"Введите в формате 89876543210"
			 },
			 checkeds: {
                required : ""
            },
			
			 },
       submitHandler: function (form) {	
		
		 $.ajax({
			type: "POST",
            url: 'integration.php',           
            data: formNm.serialize(),
            success: setTimeout((function(data){
					if (data == 'yes'){
						location.href = "http://my_site/thank-you""
						
						}
					}).bind(this), 1500, "yes")
			
		 });
		  
       
        }  	   
	
     });
     });

Решил вопрос без js, используя flex, понимая, что старые браузеры не потянут его. Сам код в натуральном его виде из комплексного компонента каталога Битрикс характеристик карточки товара:

<dl class="product-item-detail-properties">
<dt>Артикул</dt><dd>100172</dd>
<dt>Базовая единица</dt><dd>шт</dd>
...
</dl>

CSS:

.product-item-detail-properties {
    display: flex;
    flex-wrap: wrap;
}
.product-item-detail-properties dt {
    clear: both;
    flex: 0 0 50%;
    overflow: hidden;
    font-weight: bold;
    font-size: 13px;
    padding: 5px 0 5px 10px;
   border-bottom: 1px solid #e5e5e5;
}
.product-item-detail-properties dd {
    font-size: 13px;
    flex: 50% 0 0;
    padding: 7px 0;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
}
/*чередующийся цвет колонок*/
 .product-item-detail-properties dt:nth-child(4n+1),  .product-item-detail-properties dd:nth-child(4n+2) {
   background: #fbfbfb;
}

Вопрос решил так: оказывается есть еще такие варианты отображения, как
'contain' - это дефолтный по размеру контейнера;
'cover' - растягивается на весь экран;
'scaledown' - по размеру изображения и при сжатии экрана сжимается;
'none' - по размеру изображения, но при сжатии экрана не сжимается.
Добавил атрибут и значение data-fit="scaledown" и всё зарабтало как надо.