.commitment-item{
    isolation:isolate;
    min-height:190px;
}

.commitment-item>img,
.commitment-open>img{
    position:absolute;
    z-index:0;
    top:0;
    right:0;
    width:48%;
    height:100%;
    border-radius:0;
    object-fit:cover;
    object-position:center;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 18%,#000 52%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 18%,#000 52%,#000 100%);
}

.commitment-item>span,
.commitment-open{
    position:relative;
    min-height:190px;
}

.commitment-item>span,
.commitment-open>span{
    z-index:1;
    display:flex;
    width:58%;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
}

.commitment-item>span{
    padding:32px 38px;
}

.commitment-open{
    display:flex;
    align-items:center;
    padding:32px 38px;
}

.commitment-open small{
    position:absolute;
    z-index:2;
    bottom:20px;
    left:38px;
}

.commitment-open>span{
    padding-bottom:26px;
}

@media(max-width:800px){
    .commitment-item,
    .commitment-item>span,
    .commitment-open{min-height:230px}
    .commitment-item>img,
    .commitment-open>img{width:62%;opacity:.72;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 62%);mask-image:linear-gradient(to right,transparent 0%,#000 62%)}
    .commitment-item>span,
    .commitment-open>span{width:72%}
    .commitment-item>span,
    .commitment-open{padding:28px 24px}
    .commitment-open small{left:24px;bottom:18px}
}