Owlcarousel 2 less then 2 items resize - html

Question

I'm using Owlcarousel 2 (ngx-owl-carousel-o) and work good till i have 4/5 box image, but if i receive only one item or two the box with the image come too big, how i can fix this problem?
attach the image where up you can see the box image as single item, too big,
and below you can see with 5 items the size it's ok.
example http://betoffice.it
click in the button ALL under search
My Scss file
.content-carousel
{
max-width: 85vw !important;
margin: 0 auto;
padding: 0 0 1.5rem;
&.category-na {
.owl-carousel .owl-item {
width: 100% !important;
}
}
.category-title {
display: flex;
justify-content: space-between;
align-items: center;
h2 {
padding-left: 10px;
text-transform: uppercase;
font-size: 16px;
}
a{
margin-right: 10px;
}
}
.single-item {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #e4e4e4;
border-radius: 3px;
.box-img {
position: relative;
&::after {
content:'';
position: absolute;
#include bg-icon('play', center, contain, 'png');
width: 47px;
height: 47px;
transition: opacity .8s ease-in-out;
opacity: 0;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
&::before {
content:'';
position: absolute;
background-color: rgba(1,20,48,.5);
z-index: 9;
opacity: 0;
transition: opacity .7s ease-in-out;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
&:hover {
&::before {
opacity: 1;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
&::after {
opacity: 1;
}
.date-start {
opacity: 0;
}
}
img {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
}
.box-meeting-info {
display: flex;
flex-direction: column;
flex-grow: 1;
p{
color: #1a1a1a;
&:hover, &:focus {
color: #1a1a1a;
}
}
}
}
.owl-carousel {
.owl-item {
padding: 0 10px;
}
}
}
#include media-breakpoint-up(xxl){
.content-carousel {
padding: 0 3rem 1.5rem;
}
}
owl-carousel-o {
.single-item {
background-color: #fff;
border: 1px solid #ccc;
.box-meeting-info {
position: relative;
padding: 1em;
}
&:hover {
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
}
.owl-carousel {
.content-link-video {
text-decoration: none;
}
.owl-stage {
display: flex;
padding-bottom: 15px;
}
}
.owl-theme .owl-nav {
position: absolute;
top: 30%;
width: 100%;
display: none;
.owl-prev, .owl-next {
border: 1px solid #ccc;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 1px;
&:hover {
background-color: #e0dede;
}
&::before {
content:'';
height: 12px;
width: 26px;
opacity: 0.5;
}
}
.owl-prev {
left: -50px;
position: absolute;
&::before {
#include bg-icon('arrow-left', center, contain, 'png');
}
}
.owl-next {
right: -50px;
position: absolute;
&::before{
#include bg-icon('arrow-right', center, contain, 'png');
}
}
}
#include media-breakpoint-up(xl) {
.owl-theme .owl-nav {
display: block;
}
}
}
Component.html
component.html
<div class="carousel-container">
<div class="content-carousel">
<div class="category-title">
<h2>Meetings</h2>
<!--<a *ngIf="item.children.length >= 10" (click)="seeAllData(item.title)" class="btn b-button" [textContent]="'View More'"></a>-->
</div>
<owl-carousel-o [options]="customOptions">
<ng-container *ngFor="let item of uniqueMeetings; let i = index">
<ng-template carouselSlide [id]="i">
<a class="content-link-video" (click)="navigateTo(item._source.session_WIPOs2tId)">
<div class="single-item">
<div class="box-img">
<img [lazyLoad]="item._source.session_thumbnail" [defaultImage]="defaultImage" alt=""/>
<div class="date-start">
<p>{{item._source.session_startDate | date:'dd MMM yyyy'}}<span class="separator-time"> - </span><span class="time-video">{{item._source.session_startDate | date:'H:mm:ss'}}</span></p>
</div>
</div>
<div class="box-meeting-info">
<div class="box-article">
<p class="name-product">{{item._source.session_name}}</p>
</div>
</div>
</div></a>
</ng-template>
</ng-container>
</owl-carousel-o>
</div>
</div>