.inventory-buttons {
    position: relative;
    z-index: 1;
}

.product-cards--homepage + .inventory-buttons {
    padding-top: 0;
}

.inventory-buttons__bg {
    position: absolute;
    width: 1454px;
    max-width: initial;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

.inventory-buttons__headlines {
    padding-bottom: 5px;
}

.inventory-buttons__bottom {
    margin-top: 25px;
}

.inventory-button-flex {
    justify-content: center;
}

.inventory-button-item {
    margin-top: 20px;
}

.inventory-button {
    display: block;
    position: relative;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    height: 200px;
    box-shadow: 0 3px 25px rgba(0,0,0,0.16);
}

.inventory__pattern {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 75px;
    clip-path: polygon(50% 0%, 100% 40%, 100% 100%, 0% 100%, 0% 40%);
}

.inventory-button__hover {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 12px 0;
}

.inventory-button__title {
    color: var(--color-white);
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 20px;
    line-height: 1.35em;
    text-transform: capitalize;
}

@media (min-width: 768px) {
    
    .inventory-buttons__bg {
        top: -50px;
        left: -588px;
        transform: translate(0, 0);
    }
    
    .inventory-buttons__headlines {
        padding-bottom: 0;
    }
    
    .inventory-buttons__bottom {
        margin-top: 30px;
    }

    .inventory-button-item {
        margin-top: 32px;
    }
    
    .inventory__pattern {
        height: 82px;
    }
    
    .inventory-button__hover {
        padding: 8px 0;
    }
    
    .inventory-button__title {
        font-size: 24px;
    }
}

@media (min-width: 1200px) {

    .inventory-buttons__bg {
        width: 100%;
        left: -57px;
    }
    
    .inventory-button-item {
        margin-top: 30px;
    }
    
    .inventory__pattern {
        height: 121px;
    }

    .inventory-button {
        height: 315px;
    }
    
    .inventory-button__hover {
        padding: 12px 33px;
    }
    
    .inventory-button__title {
        font-size: 28px;
    }

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

    .inventory-button:hover .inventory-button__hover {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        background: rgba(26,26,26,0.98);
    }

    .inventory-button:hover .inventory-button__hidden {
        opacity: 1;
        max-height: 300px;
    }

    .inventory-button__description {
        color: var(--color-gray);
        font-weight: 400;
        margin: 0 0 10px 0;
        padding: 0;
    }

    .inventory-button:hover .inventory__pattern {
        opacity: 0;
    }

    .inventory-button__hidden .btn-tertiary:hover {
        color: var(--color-primary);
    }
}