.hero__person-cont {
     position: relative;
 }

 .hero__person-title-vertical {
    position: absolute;
    bottom: 30px;
    width: 30px;
    transition: all .5s ease;
    font-size: 18px;
    color: #4B251C;
    white-space: nowrap;
    opacity: 1;
    z-index: 2;
    font-family: 'lagu_semibold';
    right: 50%;
    transform: translate(50%, 0%) rotate(-90deg);
}
 .hero__person-txt-more {
     transition: all 1s ease;
     opacity: 0;
     position: absolute;
     left: 0;
     bottom: 0;
     z-index: 2;
     width: 100%;
 }

.hero__person-title{padding: 0 0 10px 0;}

 .hero__person.active-slider .hero__person-title-vertical {
     opacity: 0;
 }

 .hero__person.active-slider .hero__person-txt-more {
     opacity: 1;
 }

 .hero__person .hero__person-txt-more {
     padding: 40px 20px 30px;
     padding-left: 20px;
 }

 .hero__person.active-slider .hero__person-txt-more {
     width: 100%;
     transform: rotate(0);
     right: inherit;
     left: 0;
     bottom: 0;
 }

 .hero__person.active-slider .hero__person-title {
     font-size: 25px;
     line-height: 30px;
     font-weight: 700;
     position: relative;
     bottom: 0;
     color:#fff;
 }

 .hero__person.active-slider .hero__sub-head {
     display: block;
     font-size: 16px;
     font-weight: 300;
     line-height: 22px;
     color:#fff;
 }


 .hero__person-cont:before {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     content: '';
     z-index: 2;

     background: rgb(255, 221, 156);
     background: linear-gradient(180deg, rgba(255, 221, 156, 0.25) 20%, rgba(237, 186, 91, 1) 100%);
 }

.hero__person.active-slider  .hero__person-cont:before{opacity: 0;}




.hero__person .hero__person-txt-more{
  background: rgb(184,78,78);
background: linear-gradient(180deg, rgba(184,78,78,0) 0%, rgba(184,91,78,1) 68%);  
}


 /* .mod--1 .hero__person-txt-more {
     opacity: 1;
 }


 .mod--1 .hero__person-txt-more {
     width: 100%;
     transform: rotate(0);
     right: inherit;
     left: 0;
     bottom: 0;
  
 }

.mod--1  .hero__person-cont:before{opacity: 0;}

 .mod--1 .hero__person-title {
     font-size: 25px;
     line-height: 30px;
     font-weight: 700;
     position: relative;
     bottom: 0;
     color:#fff;
 }

 .mod--1 .hero__sub-head {
     display: block;
     font-size: 16px;
     font-weight: 300;
     line-height: 22px;
     color:#fff;
 }


 .hero__persons:hover .mod--1 .hero__person-txt-more {
     opacity: 0;
 }



 .hero__persons:hover .mod--1 .hero__person-cont:before{opacity: 1;}

 .hero__person.hero__person.mod--1.active-slider .hero__person-cont:before{opacity: 0;}


 .mod--1 .hero__person-title-vertical {
     opacity: 0;
 }

 .hero__persons:hover .mod--1 .hero__person-title-vertical {
     opacity: 1;
     transition: all .5s ease;
 }


 .hero__person.hero__person.mod--1.active-slider .hero__person-title-vertical {
     opacity: 0;
     transition: all .5s ease;
 }


 .hero__person.hero__person.mod--1.active-slider .hero__person-txt-more {
     opacity: 1;
     transition: all .5s ease;
 } */





 .hero__persons {
     position: relative;
     z-index: 0;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     margin-right: -20px;
     margin-left: -85px;
     -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     height: 488px;
     width: 100%;
    gap: 10px;
     margin: 0 auto 40px;
 }

 .hero__person {
     position: relative;
     overflow: hidden;
     width: 8%;
     /* padding-right: 5px;
     padding-left: 5px; */
     border-radius: 10px;
     cursor: pointer;
     transition: width 1s ease;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     min-width: 100px;
 }




 .hero__person-cont {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
     border-radius: 16px;
 }

 .hero__person-img {
     position: relative;
     z-index: 0;
     display: block;
     height: 100%;
     min-width: 100%;
     object-fit: cover;
     transition: all .5s ease;
     object-position: center;

 }

 /* .mod--1 {
     width: 100%;
 } */

 .hero__persons .hero__person.active-slider {
     width: 100% !important;

 }

 /* .hero__persons:hover .mod--1 {
     width: 10%;
 }



 .hero__person.active-slider .hero__person-img {
     height: 100%;
     object-position: right;
 }

 .hero__person.hero__person.mod--1.active-slider .hero__person-img {
     height: 100%;
     object-position: right;
 } */


 .hero__col.col--1 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     padding-bottom: 56px;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
     -ms-flex-pack: end;
     justify-content: flex-end;
 }

 .hero__col.col--2 {
     z-index: 0;
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
 }