.production-contain__title{
    font-size: 12px;
    line-height: 16px;
    color: #6B6B6B;
    margin-bottom: 20px;
}

.production-items{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 30px;
	margin-bottom: 80px;
}

.production-items.production-items-doc{
/* .production-contain.production-items-doc{ */
    margin-top: -180px;
}

.production-item{
	grid-column: span 2;
	position: relative;
	background: var(--grey);
	border-radius: 16px;
	overflow: hidden;
	min-height: 230px;
	cursor: pointer;
}

.production-items-bg{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: #f9a410;
    -webkit-transform: scaleX(.3);
    -ms-transform: scaleX(.3);
    transform: scaleX(.3);
    opacity: 0;
    -webkit-transition: opacity .2s, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, opacity .2s, -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out, opacity .2s;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}

.production-items-content{
	position: relative;
	z-index: 10;
	padding: 24px 20px;
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.production-item__img{
    position: absolute;
    right: -1px;
    top: -1px;
    /* filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    -webkit-transition: -webkit-filter .2s;
    transition: filter .2s;
    -o-transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s; */
    width: 100%;
    max-width: 200px;
}

.production-items__info div{
	font-size: 18px;
	line-height: 18px;
    margin-bottom: 10px;
    max-width: 180px;
}

.production-items__info span{
	font-size: 12px;
}

.production-items__label{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.production-items__label-container{
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.production-items__label a{
	display: block;
    background: white;
    padding: 5px 13px;
    border-radius: 16px;
    width: fit-content;
    font-size: 13px;
    line-height: 18px;
    transition: all .3s ease;
    color: black;
}

.production-items__label a:hover{
    background: #206e93;
    color: white;
    text-decoration: none;
}

a.production-items-link{
	font-size: 12px;
    /* letter-spacing: 0%; */
    flex-shrink: 0;
	color: var(--orange);
    text-decoration: none;
}

/* темные */
.production-items__black .production-item{
    background: var(--grey-dark);
}

.production-items__black .production-items__label a{
    background: var(--black);
    color: white;
}

.production-items__black .production-items__label a:hover{
    background: var(--blue);
    /* color: white; */
}

.production-items__black  .production-items__info span {
    color: #606060;
}
/* темные END */


@media screen and (min-width: 769px) {
    .production-item:hover .production-items-bg{
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
    }

	.production-item:hover .production-items-link{
		color: white;
	}

    .production-item:hover .production-item__img{
    /* filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0) */
    }
}


/* .production-item .production-items-link:hover{
    color: #206e93;
} */


@media (max-width: 1199px) {
    .production-item {
        grid-column: span 3;
    }

    .production-item__img{
        top: -32px;
        right: -74px;
    }
}

@media (max-width: 767px) {
    .production-item {
        grid-column: span 6;
    }

    .production-item__img{
        top: 0px;
        right: -30px;
    }
}