.promo-grid-container .row{
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 16px;
}

.promoGrid-item {   
    height: 260px;
}

.promo-grid-header{
    font-size: 20px;
    font-family: ubuntuBold;
    margin-top: 35px;
}

.promo-grid-container{
    margin: 7px auto 0 auto;
}

.promo-grid-element{
    display: inline-block;
    position: relative;
    padding: 0;
    width: 100%;
    height: 100%;
}

.promo-grid-title{
    position: absolute; 
    left: 32px; 
    bottom: 32px;
    color: white;
    font-family: ubuntuBold;
    font-size: 25px;
}

.promo-grid-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px){
    .promo-grid-title{
        font-size: 20px;
        left: 20px;
        bottom: 16px;
    }
}

@media (min-width: 1200px) {
    .promoGrid-item {       
        &.col-xl-3 {
            max-width: calc(25% - 16px);
        }
    
        &.col-xl-6 {
            max-width: calc(50% - 16px);
        }
    
        &.col-xl-9 {
            max-width: calc(75% - 16px);
        }
    }
}

@media (max-width: 1199px) and (min-width: 545px) {
    .promoGrid-item {       
        &.col-sm-3 {
            max-width: calc(25% - 16px);
        }
    
        &.col-sm-6 {
            max-width: calc(50% - 16px);
        }
    
        &.col-sm-9 {
            max-width: calc(75% - 16px);
        }
    }
}