.mgrdcnt .itemwrapper {
    background-color: var(--bs-primary);
    color: #fff;
    padding: 30px 35px;
    height: 100%;
}

.mgrdcnt .item {
    position: relative;
}

.mgrdcnt .item.is-open .mgrdcnt__expandbtn {
    transform:rotate(45deg);
}

.mgrdcnt .item:hover .itemwrapper {
   /* position: absolute;
    left: 0;
    padding: 15px;*/
}

.mgrdcnt__media {
    margin-bottom: 10px;
}


.mgrdcnt--icons .mimage {
    height: 60px;
    display: flex;
    align-items: flex-end;
}

.mgrdcnt__title {
    font-size: 20px;
    max-width: 307px;
}


.mgrdcnt .itemwrapper:before {
    content: "";
    background-color: var(--bs-primary);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 1rem var(--bs-gray-500);
    transition: all .25s ease-out;
    opacity: 0;
    visibility: hidden;
}

.mgrdcnt:not(.mgrdcnt--expandable) .item:hover .itemwrapper:before {
    transform: scaleY(1.1);
    opacity: 1;
    display: block;
    visibility: visible;
}


.mgrdcnt > .row > .container-fluid > .row {
    --bs-gutter-y: var(--bs-gutter-x);
}


.mgrdcnt__media, .mgrdcnt__cnt, .mgrdcnt__title {
    position: relative;
    z-index: 2;
} 

.mgrdcnt__expandbtn {
    position: absolute;
    right: 30px;
    top: 20px;
    background: transparent;
    border: none;
    padding: 0;
    width: 50px;
    height: 50px;
    z-index: 5;
} 

.mgrdcnt__expandbtn:hover,
.mgrdcnt__expandbtn:focus,
.mgrdcnt__expandbtn:active
{
    background: transparent;
    border: none;
}

{# evita che allo scale si crei un bordino fastidioso #}
.mgrdcnt--expandable .item.is-open {
    overflow-x: clip;
}

.mgrdcnt--expandable .mgrdcnt__cnt{    
    position: absolute;
    background: #DBE3F2;
    z-index: 100;
    opacity:0;
    height:0;
    visibility:hidden;
    transition: all 0.1s ease-out 0s;
    padding: 15px 30px 30px;
    left: 0;
}

.mgrdcnt--expandable .item.is-open .mgrdcnt__cnt{
    opacity:1;
    height: auto;
    visibility:visible;
    transition: all 0.2s ease-in 0.3s;
}

.mgrdcnt--expandable .item.is-open .itemwrapper:before {
    transform: scaleY(1.1);
    opacity: 1;
    display: block;
    visibility: visible;
}

.bubox .item{
    text-align:center;
}

.bubox.mgrdcnt .itemwrapper{
    padding: 70px 35px;
    border-radius:20px;
    overflow:hidden;
}

.bubox .item .itemwrapper:before{
    display:none;
}


.bubox .item .mgrdcnt__title{
    margin-top: 30px;
    max-width: 100%;
    color: #ffffff;
    text-transform:uppercase;
}

.bubox.mgrdcnt:not(.mgrdcnt--expandable) .item:hover .itemwrapper:before{
    transform:scale(1);
    display:none;
}


.bubox .item.oleodinamica .itemwrapper, .bubox .item.oleodinamica .itemwrapper:before {
    background-color: var(--bs-oleodinamica);
}

.bubox .item.pneumatica .itemwrapper, .bubox .item.pneumatica .itemwrapper:before {
    background-color: var(--bs-pneumatica);
}

.bubox .item.altapressione .itemwrapper, .bubox .item.altapressione .itemwrapper:before {
    background-color: var(--bs-altapressione);
}

.bubox .mimage{
    min-height:180px;
}

@media (min-width:1200px) {
    .mgrdcnt.bubox > .row > .container-fluid > .row {
        max-width: 1199px;
        margin: 0 auto;
    }
}

.mgrdcnt--centered > .row > .container-fluid > .row{
    justify-content:center;
}