.dashicons-bs-otras-soluciones {
    width: 24px;
    height: 24px;
    background: url(icon.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.transition {
    /* transition: all .5s cubic-bezier(.2, .8, .2, 1); */
    transition: all 0.3s ease-in-out;
}

.bs-otras-soluciones-container {
    border: 1px solid #e3e3df;
    background-color: #FBFBFA;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: end;justify-content: center;
}


.bs-otras-soluciones-wrap {
    border-bottom: 1px solid #e3e3df !important;
    background-color: #FBFBFA;
    padding: calc(12px + 0.5vw);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;justify-content: center;
    min-height: 169px;
}

.bs-otras-soluciones-container .row .col-12:last-child .bs-otras-soluciones-wrap {
    border-bottom: 0px !important;
}

.bs-otras-soluciones-wrap:hover, .bs-otras-soluciones-wrap:focus-within {
    background: #FDF0E1;
    border-color: #F3D6B2;
    box-shadow: 0 18px 46px rgba(214, 120, 26, .16);
    max-height: 280px;
}

/* Al hacer hover en un bloque, los demás se encogen a max-height: 100px. */
.bs-otras-soluciones-container:has(.bs-otras-soluciones-wrap:hover) .bs-otras-soluciones-wrap:not(:hover) {
    max-height: 130px;
    min-height: 130px;
}

.bs-otras-soluciones-wrap .square {
    position: absolute;
    right: -72px;
    bottom: -92px;
    width: 190px;
    height: 190px;
    border: 2px solid lightgrey;
    transform: rotate(45deg);
    opacity: .59;
    pointer-events: none;
}

.bs-otras-soluciones-wrap:hover .square, .bs-otras-soluciones-wrap:focus-within .square {
    border-color: #fff;
    opacity: .8;
    transform: rotate(35deg) scale(1.26);
}

.bs-otras-solucioneses-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}


@media screen and (min-width: 480px) {
.bs-otras-soluciones-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.35s ease-out;
}

.bs-otras-soluciones-desc > * {
  overflow: hidden; /* required for grid-rows trick to clip content */
  min-height: 0;
}

.bs-otras-soluciones-wrap:hover .bs-otras-soluciones-desc {
  grid-template-rows: 1fr;
  opacity: 1;
}

.bs-otras-soluciones-cta {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    margin: 0;
    padding: 0;
    border: 0;
    transition: grid-template-rows 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.35s ease-out 0.1s,
                transform 0.4s ease-out 0.1s;
}

.bs-otras-soluciones-cta > * {
    overflow: hidden;
    min-height: 0;
    margin: 0; /* azzera margini di default (es. <p>) che creano spazio residuo */
}

.bs-otras-soluciones-wrap:hover .bs-otras-soluciones-cta {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}
}