.image-buttons__headlines {
    margin-bottom: 15px;
}

.image-buttons__bottom {
    margin-top: 30px;
}

.image-buttons__headlines h2 {
    margin-bottom: 20px;
}

.image-buttons__wrap {
    position: relative;
    z-index: 1;
}

.image-buttons__wrap::before {
    content: '';
    position: absolute;
    width: calc(100% - 70px);
    height: calc(100% - 70px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FAF7F7;
    margin-top: 7.5px;
    z-index: -1;
}

.bg-gray .image-buttons__wrap::before {
    background: #F0EDED;
}

.image-button-item {
    margin-top: 15px;
}

.image-button {
    position: relative;
    display: block;
    width: 100%;
    height: 188px;
    overflow: hidden;
    background: none;
}

.image-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,  rgba(162,34,34,0) 0%,rgba(162,34,34,0) 50%,rgba(162,34,34,0.6) 70%,rgba(162,34,34,1) 100%);
}

.image-button--blue::after {
    background: linear-gradient(to bottom,  rgba(38,43,108,0) 0%,rgba(38,43,108,0) 50%,rgba(38,43,108,0.6) 70%,rgba(38,43,108,1) 100%); 
}

.image-button__hover {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 20px 0;
    color: var(--color-white); 
    z-index: 1;
}

.image-button__title {
    color: var(--color-white); 
    font-size: 17px;
    margin: 0 0 20px 0;
    line-height: 1.235em;
}

@media (min-width: 768px) {
    .image-buttons__headlines {
        margin-bottom: 3px;
    }
    
    .image-buttons__bottom {
        margin-top: 35px;
    }
    
    .image-buttons__wrap::before {
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        margin-top: 16px;
    }
    
    
    .image-button-item {
        margin-top: 32px;
    }
    
    .image-button {
        height: 180px;
    }
    
    
    .image-button__title {
        font-size: 20px;
        margin: 0 0 15px 0;
        line-height: 1.25em;
    }
}


@media (min-width: 1200px) {
    .image-buttons__headlines {
        margin-bottom: 18px;
    }
    
    .image-buttons__bottom {
        margin-top: 50px;
    }
    
    .image-buttons__wrap::before {
        width: calc(100% - 200px);
        height: calc(100% - 200px);
    }
    
    .image-button {
        height: 350px;
    }
    
    .image-button__hover {
        padding: 10px 50px;
    }
    
    .image-button__title {
        font-size: 22px;
        margin: 0 0 15px 0;
    }

    .image-button__description {
        margin-bottom: 15px;
        line-height: 1.6em;
        height: 150px;
        overflow-y: auto;

        &::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            background-color: #F5F5F5;
        }
        
        &::-webkit-scrollbar
        {
            width: 6px;
            background-color: #F5F5F5;
        }

        &::-webkit-scrollbar-thumb
        {
            background-color: var( --color-red );
        }
    }

    .image-button__hidden {
        opacity: 0;
        max-height: 0;
    }

    .image-button:hover .image-button__hidden {
        opacity: 1;
        max-height: 300px;
        transition: all 0.5s ease-in-out;
    }

    .image-button:hover .image-button__hover {
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .image-button:hover::after {
        background: linear-gradient(to bottom,  rgba(162,34,34,0.85) 0%,rgba(162,34,34,0.85) 50%,rgba(162,34,34,0.85) 70%,rgba(162,34,34,0.85) 100%);
    }
    
    .image-button--blue:hover::after {
        background: linear-gradient(to bottom,  rgba(38,43,108,0.85) 0%,rgba(38,43,108,0.85) 50%,rgba(38,43,108,0.85) 70%,rgba(38,43,108,0.85) 100%); 
    }

    .image-button-item.blue-overlay {
        & .image-button::after {
            background: linear-gradient(to bottom,  rgba(38,43,108,0) 0%,rgba(38,43,108,0) 50%,rgba(38,43,108,0.6) 70%,rgba(38,43,108,1) 100%);
        }

        & .image-button:hover::after {
            background: linear-gradient(to bottom,  rgba(38,43,108,0.85) 0%,rgba(38,43,108,0.85) 50%,rgba(38,43,108,0.85) 70%,rgba(38,43,108,0.85) 100%); 
        }
    }
}

@media( max-width : 1199px ) {
    .image-button-item {
        &:nth-child(even) .image-button::after {
            background: linear-gradient(to bottom,  rgba(38,43,108,0) 0%,rgba(38,43,108,0) 50%,rgba(38,43,108,0.6) 70%,rgba(38,43,108,1) 100%);
        }

        &:nth-child(even) .image-button:hover::after {
            background: linear-gradient(to bottom,  rgba(38,43,108,0.85) 0%,rgba(38,43,108,0.85) 50%,rgba(38,43,108,0.85) 70%,rgba(38,43,108,0.85) 100%); 
        }
    }
}