.chsm-card{
    background-color: #fff;
    height: 100%;
    display: flex;
    gap: 2rem;
    & .chsm-card__image {
      position: relative;
      & img{
        border: 1px solid #ccc;
      }
  
      & .overlay{
        width: 100%;
        min-height: 100%;
        background-image: linear-gradient(45deg, #0091bc 0%, #00a8ff 30%, white, #00ff54 70%, #0091bc 90%);
        position: absolute;
        top: 0;
        height: 0;
        mix-blend-mode: color;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
    }
  
    & .chsm-card__title{
      font-size: 1.5rem;
      margin-top: 1rem;
      color: var(--azul-oscuro);
    }
    & .chsm-card__subtitle{
      font-size: 1rem;
      font-weight: bold;
      color: var(--principal);
      margin-bottom: 0.5rem;
      display: block;
    }
  
    & .open-popup-icon{
      display: none;
      color: var(--principal);
      opacity: 0.5;
    }

    & header{
      flex: 0.25;
    }
  
    & .chsm-card__content{
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      flex: 1;
      & p{
        text-align: justify;
        transition: color ease .3s;
      }
  
      & .chsm-btn-2{
        padding: 0.5rem 1.5rem;
        font-size: 1rem;
        /* opacity: 0; */
        transition: opacity 0.3s ease;
      }
    }
  
    &:hover{
      & .chsm-card__image {  
        & .overlay{
          opacity: 1;
        }
      }
  
      & .open-popup-icon{
        opacity: 1;
      }
  
      & .chsm-card__content{
        & p{
          color: #424242;
        }
    
        & .chsm-btn-2{
          opacity: 1;
          transition: opacity 0.5s 0.3s ease;
        }
      }
    }
  }
  
  @media screen and (max-width: 767px) {
    .chsm-card{
      gap: 0rem;
      & header{
        flex: unset;
        display: flex;
        & .chsm-card__image{
          max-width: 120px;
          aspect-ratio: 1;
        }
      }
      & .chsm-card__title-container{
        padding-left: 1rem;
        & .chsm-card__title{
          font-size: 1rem;
        }
        & .chsm-card__subtitle{
          display: none;
        }
        & .open-popup-icon{
          display: block;
        }
      }
      & .chsm-card__content{
        & p, & .chsm-btn-2{
        display: none;
        }
      }
    }
      
    .card__popup .chsm-card{
      flex-direction: column;
      & header{
        display: block;
        & .chsm-card__image{
          max-width: 100%;
        }        
      }

      & .chsm-card__title-container{
        padding-left: 0;
        & .chsm-card__title{
          font-size: initial;
        }
        & .chsm-card__subtitle{
          display: block;
        }
        & .open-popup-icon{
          display: none;
        }
      }

      & .chsm-card__content{
        & p, & .chsm-btn-2{
          display: block;
        }
        
        & .chsm-btn-2{
            opacity: 1;
        }
      }
    }
  }