.csec-cards {
    display: flex;
    gap: 12px;
    height:var(--csec-min-height, 550px);
}

.csec-card {
    position: relative;
    flex: 0.7;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    /*transition:flex 0.6s ease;*/
}

.csec-body .csec-card.active {
    flex: var(--csec-active-flex, 5);
}

.csec-body .csec-card.active .csec-bg img{
	display:none;
}

/* image */

.csec-bg {
    position: absolute;
    inset: 0;
}

.csec-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* settore badge */

.csec-body .csec-label {
    position: absolute;
    bottom:0px;
    z-index: 2;
	width:100%;
	left:0;
	right:0;
	writing-mode: vertical-rl;
    transform: rotate(180deg);
	padding:20px;
	height:100%;
}

.csec-body .csec-card:before{
	background: #000000;
	background: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	background: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
	content: "";
	position: absolute;
	z-index: 1;
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	/*transition: all 0.5s ease;*/
}

.csec-body .csec-card:hover:before{
	background: #ff3b30;
	background: -webkit-linear-gradient(360deg, rgba(255, 59, 48, 0.8) 0%, rgba(255, 59, 48, 0) 100%);
	background: -moz-linear-gradient(360deg, rgba(255, 59, 48, 0.8) 0%, rgba(255, 59, 48, 0) 100%);
	background: linear-gradient(360deg, rgba(255, 59, 48, 0.8) 0%, rgba(255, 59, 48, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3b30", endColorstr="#ff3b30", GradientType=0);
}

.csec-body .csec-card.active:before{
	background:#FFFFFF !important;
}

.csec-body .csec-label span {
    background: #ff3b30;
    color: #fff;
    padding: 14px 5px;
    border-radius: 30px;
	font-size: 14px;
}

.csec-body .csec-label .csec-title {
    transform: translateX(0%) rotate(0deg);
    font-weight: 700;
    font-size:var(--csec-title-size);
	color:var(--csec-title-color);
    z-index: 2;
}

/* content */

.csec-content {
    display: none;
}

.csec-card.active .csec-content {
    display: block;
    position: relative;
    z-index: 5;
    padding:0px;
    overflow-y: auto;
}

/* hide title when expanded */

.csec-body .csec-card.active .csec-title,
.csec-body .csec-card.active .csec-label {
    display: none;
}
@media (max-width: 768px){

    .csec-cards{
        display:flex;
        flex-direction:column;
        height:auto;
        gap:12px;
    }

    .csec-card{
        flex:none;
        min-height: 90px;
		border-radius: 10px;
    }
	
	.csec-body .csec-label .csec-title{
		font-size:var(--csec-title-size-mobile);
	}

    .csec-card.active{
        min-height:var(--csec-min-height, 550px);
    }

    /* Keep title visible */
    .csec-body .csec-label{
        position:absolute;
        left:0;
        bottom:0;
        writing-mode:horizontal-tb;
        transform:none;
    }
	
	.csec-body .csec-label span{
		padding:6px 14px;
	}

    /* IMPORTANT */
    .csec-card.active .csec-title,
    .csec-card.active .csec-badge{
        opacity:1;
        display:block;
    }

    .csec-content{
        display:none;
    }

    .csec-card.active .csec-content{
        display:block;
        position:relative;
        z-index:5;
    }
}