


/* wrapper */
.img-wrap {
  display: flex;
  gap:20px;
  width: 100%;
  perspective: 1200px;
}

/* base slice */
.img-slice {
  position: relative;
  width: calc(28% - 20px);
  height: 380px;
  padding:20px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 0 100px 0 0;
  transform-style: preserve-3d;
  transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
}

/* default active slice */
.img-slice.active {
  width: calc(44% - 20px);
}

.img-wrap:hover .img-slice {
  width: calc(28% - 20px);
}

/* hovered slice */
.img-wrap .img-slice:hover {
  width: calc(44% - 20px);
}

/* image container */
.img-slice .img-presence,
.img-slice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.img-slice .title {
    text-align: left;
    font-size: 2rem;
    font-weight: 400;
	position:relative;
    z-index:2
}

.img-slice .content{
    display: flex;
	justify-content:center;
	align-items:flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
	position:relative;
	z-index:2;
}

.img-slice:before{
    position: absolute;
	content: "";
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .5);
   }
   


.img-slice .content .description {
    font-size:20px; 
	line-height:30px;
	font-weight:400; 
	opacity:0;
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

 .img-slice.active .content .description{
    opacity:1;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
}

 .content-btn{
    background-color:rgb(var(--bg-theme-color-primary));
	color:#fff;
	text-decoration:none;
    border-width: 1px;
	border-style:none;
    border-radius: 24px;
    padding: 12px 27px 14px 27px
}
