.ba-wrapper{
    position:relative;
    max-width:1000px;
    margin:0 auto;
    display:flex;
    align-items:stretch;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    background:#000;
    height:500px;
  }
  .half{
    position:relative;
    width:50%;
    overflow:hidden;
  }
  .half img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0; left:0;
  }
  .label{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    padding:6px 12px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-weight:700;
    border-radius:6px;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .half.after .label{ left:auto; right:12px; }
  .divider{
    position:absolute;
    top:0; bottom:0;
    left:50%;
    width:2px;
    transform:translateX(-50%);
    background:#ffffff;
    opacity:.95;
    z-index:3;
  }
  .before-btn{
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
width: 12%;
    height: auto;
    /*background:white;*/
    /*border-radius:50%;*/
    /*box-shadow:0 4px 12px rgba(0,0,0,.25);*/
    display:grid;
    place-items:center;
    cursor:pointer;
    z-index:4;
    /*font-size:20px;*/
    /*font-weight:bold;*/
  }
  .after-btn{
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
    width: 12%;
    height: auto;
    /*background:white;*/
    /*border-radius:50%;*/
    /*box-shadow:0 4px 12px rgba(0,0,0,.25);*/
    display:grid;
    place-items:center;
    cursor:pointer;
    z-index:4;
    /*font-size:20px;*/
    /*font-weight:bold;*/
  }
  
  .before-btn svg,
.after-btn svg {
  width: 50px; /* Example desktop size */
}
  
  
 @media (max-width: 628px) {
  .ba-wrapper {
    max-height: 220px!important;
  }

  .before-btn svg,
  .after-btn svg {
    width: 35px!important;
  }
}