.block-accordeon {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}
.block-accordeon__item {
    display: inline-block;
    height: 270px;
    width: 22%;
    border-radius: 15px;
    background-position: top left;
    background-size: cover;
    transition: width .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.block-accordeon__mini {
    background: linear-gradient(
            180deg
            , rgba(72, 72, 72, 0) 44.79%, rgba(30, 30, 30, 0.8) 89.58%);
    height: 100%;
    width: 100%;
    font-size: 12px;
    padding: 215px 10px 5px 10px;
    color: white;
    position: absolute;
    bottom: 0;
}
.block-accordeon__big {
    background: rgba(30, 30, 30, 0.8);
    height: 100%;
    width: 100%;
    display: none;
    padding: 15px;
    color: white;
    font-size: 14px;
}
.block-accordeon__item.mini {
    width: 10%;
}
.block-accordeon__item.mini .block-accordeon__mini {
    display: none;
}
.block-accordeon__item.mini .block-accordeon__big {
    display: none;
}
.block-accordeon__item.open {
    width: 60%;
}
.block-accordeon__item.open .block-accordeon__mini {
    display: none;
}
.block-accordeon__item.open .block-accordeon__big {
    display: block;
}

@media only screen and (max-width : 1365px) {

}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {
    .block-accordeon__mini {
        display: none !important;
    }
    .block-accordeon__big {
        display: block !important;
    }
    .block-accordeon__item {
        width: 24%;
    }
    .block-accordeon__item.open {
        width: 24%;
    }
    .block-accordeon__item.mini {
        width: 24%;
    }
    .block-accordeon__item {
        height: 325px;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .block-accordeon {
        display: none;
    }
}

@media only screen and (max-width : 575px) {

}