.classes-list-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 30px;
}

.classes-list-partner {
  position: relative;
  width: calc(33.33% - 20px);
  cursor: pointer;
}

.image-wrapper-list {
  position: relative;
  overflow:hidden;
  height: 330px;
  background-color: #ddd;
  border-radius:10px;
  border-bottom: 0px;
	transition: border-bottom 0.5s ease-in-out
}

.active .image-wrapper-list {
    border-bottom: 20px solid #A52869;
	transition: border-bottom 0.5s ease-in-out
}

.image-wrapper-list img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  scale: 1;
	
	-webkit-transition: scale 0.5s ease-in-out;
	transition: scale 0.5s ease-in-out;
}

.list-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(/wp-content/uploads/2025/04/modalidades-00-cover.png);
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 20px;
	background-size: cover;
    padding: 20px;
    background-position: center;
    background-repeat: no-repeat;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
	-webkit-transition: background-image 1s ease-in-out;
	transition: background-image 1s ease-in-out;
}



.classes-list-partner .close-list {
    width: 34px;
    height: 34px;
    display: block;
    position: absolute;
    background-image: url(/wp-content/uploads/2025/04/floatForm_iconClose1.svg);
    background-repeat: no-repeat;
    background-position: center;
    right: 40px;
    top: 10px;
}



.active .list-gradient {
	opacity: 0;
	transition: opacity 0.5s ease-in-out
}

.class-list-title-inside {
	color: var(--Black, #231F20);
	font-family: Montserrat;
	font-size: 40px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
	margin-bottom: 40px
		-webkit-transition: color 0.5s ease-in-out;
	transition: color 0.5s ease-in-out;
}

.classes-list-partner:hover .list-gradient {
	background-image: url(/wp-content/uploads/2025/04/modalidades-00-coverOVER.png);
	-webkit-transition: background-image 0.5s ease-in-out;
	transition: background-image 0.5s ease-in-out;
}

.classes-list-partner:hover .class-list-title-box{
	color: #A52869;
	-webkit-transition: color 0.5s ease-in-out;
	transition: color 0.5s ease-in-out;
}

.classes-list-partner:hover .image-wrapper-list img {
 	-webkit-transition: scale 0.5s ease-in-out;
	transition: scale 0.5s ease-in-out;
  	scale: 1.2;
}


.class-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:80px;
  row-gap: 0;
	margin-top: 40px
}

.class-list  .class {
  color: rgba(35, 31, 32, 0.7);
  font-family: Montserrat;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  border-bottom: 1px solid #D9D9D9;
	position: relative;
	transition: color 0.5s ease-in-out;
}

.class-list .class a{
	color: rgba(35, 31, 32, 0.7);
	transition: color 0.5s ease-in-out;
}

.class-list .class:hover a{
	color: white;
	transition: color 0.5s ease-in-out;
}

.class-list .class a {
    width: 100%;
    display: block;
    padding: 15px;
    position: relative;
    z-index: 99;
}

.class-list .class::before {
  content: '';
  background: linear-gradient(to right, #F73F41, #A52869);
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: width 0.5s ease-in-out;
}

.class-list .class:hover::before {
  width: 100%;
}
.class-list-info {
    display: none;
    padding: 10px 40px;
    position: relative;
    width: calc(100vw - 100px);
    box-sizing: border-box;
    z-index: 10;
   	margin-top: 30px;
	    margin-bottom: 60px;
}

.class-list-title-box {
    color: var(--White, #FFF);
    text-align: center;
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
	opacity: 1;
	transition: opacity 0.5s ease-in-out
}

.classes-list-partner.active .class-list-title-box{
	opacity: 0;
	transition: opacity 0.5s ease-in-out
} 

.classes-list-partner.active .info {
    display: block;
    animation: slideDown 0.5s ease-in-out;
}



@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 500px;
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .classes-list-partner  {
        width: calc(50% - 5px);
    }
	
	.class-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 50px;
		row-gap: 0px;
	}
	
	.class-list-info {
        width: calc(100vw - 60px);

    }
}

@media (max-width: 767px) {
	
	.classes-list-partner .close-list {
		right: 0;
	}

	
	.active .image-wrapper-list {
    	border-bottom: 15px solid #A52869;
	}	
	.image-wrapper-list{
		height: 180px
	}
	
    .classes-list-partner {
        width: 100%;
    }
	
	.class-list  .class{
		font-size: 18px
	}

    .class-list-info {
        width: calc(100vw - 40px);
		padding: 0;
		margin-top: 10px;
        margin-bottom: 10px;
    }
	
	.class-list-title-box,
	.class-list-title-inside {
		font-size: 31px;
	}
	
	.class-list {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 0px;
	}
	
	.class-list-title-inside {
		margin-bottom: 20px;
	}
	
	.class-list .class a{
		padding: 15px 10px
	}
}