/* ОСТАТЬСЯ ДОЛЖЕН ТОЛЬКО ОДИН */
.case_item:nth-child(1){ grid-area: item_1;}
.case_item:nth-child(2){ grid-area: item_2;}
.case_item:nth-child(3){ grid-area: item_3;}
.case_item:nth-child(4){ grid-area: item_4;}
.case_item:nth-child(5){ grid-area: item_5;}
.case_item:nth-child(6){ grid-area: item_6;}
.case_item:nth-child(7){ grid-area: item_7;}
.case_item:nth-child(8){ grid-area: item_8;}
.case_item:nth-child(9){ grid-area: item_9;}
.case_item:nth-child(10){ grid-area:item_10;}



.cases_wrap { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "item_3 item_4 item_1 item_1"
    "item_5 item_6 item_1 item_1"
    "item_2 item_2 item_7 item_8"
    "item_2 item_2 item_9 item_10";

}


.case_item{
	min-height:50px;
}


.case_item_cart {
	position:relative;
	/*border: 2px solid green;*/
	width: 100%;
	height:100%;
	overflow: hidden; 
	
   display: flex;
   flex-direction: column;
   justify-content: space-between;

}

.case_item_cart img {
	position:absolute;
	width: 100%;
	height:100%;
	object-fit: cover;
	z-index:-1;
	transition: transform 0.3s ease;
  
}

.case_item_head, .case_item_footer {
	padding:15px;
}

.item_cart_title{
	margin-bottom:5px;
  
}

.case_item_cart:hover img {
    transform: scale(1.1); 
}



/* .case_item_footer{
	opacity: 0;

}

.case_item_cart:hover .case_item_footer{
	background-color: red;
	opacity: 1;
	transition: .3s;
}
 */


.case_item_footer {
	position: relative;
	right: -100%; 
	transition: right 0.3s ease; 
	opacity: 0; 
	
	display: flex;
    justify-content: space-between;
	align-items: center;
	
}

.case_item:hover .case_item_footer {
	right: 0; 
	opacity: 1; 
}



.case_item_footer img{
	position:unset;
	width: 16px;
    height: 16px;
	object-fit: unset;
	z-index: auto;
	transition:unset;
	
}


.case_item_footer .box_arrow{
	display: flex;
	align-items: center;
	justify-content: center;
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
}


.box_all{
	display: flex;
	justify-content: center;
    text-align: center;
	align-items: center;
	
	margin: 0 auto;
	
	border-radius: 50%;
    width: 272px;
    height: 272px;
	transition: all ease .5s;
}


.box_all:hover {
    background: #28A1CE;
	

}

.cases_wrap a:not(:last-child){ 
	display: block;}



@media screen and (max-width: 1024px){
		.cases_wrap { 
		
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"item_3 item_4"
			"item_5 item_6"
			"item_1 item_1"
			
			"item_2 item_2"
			"item_7 item_8"
			"item_9 item_10";}


}


@media screen and (max-width: 576px){
		.cases_wrap{ 
		    display: block;
			}
			
		.case_item{
			height: 240px;}	
			
		.case_item:not(:last-child){
			margin-bottom:10px;}	

}	
			


/* Flex-grid */
.container-m  .case_card{
	margin-bottom: 50px;
	position: relative;
	break-inside: avoid;
}


.container-m {
	column-count: 3;
	column-gap: 3%;
}

 .container-m img {
	max-width: 100%;
	display: block;
	margin-bottom: 10px;
 }
 
 .container-m .case_card .blur{
	width: 100%;
	height: 100%;
	/* background-color: #00000014; */
	position: absolute;
	top: 0;
 }
 

.container-m .case_card img {
	transition: transform 0.3s ease;
}


@media(max-width: 576px){
	.container-m{
		column-count: 2;
	}
}



.cases h2{
	text-align: center;
}

 .container-m .case_card:hover img {
	/* transition: transform 0.3s ease;
	transform: scale(0.7);  */
}



 /* 
 .perspective {
	 transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg); 
	 box-shadow: -15px 15px 20px rgba(0, 0, 0, 0.5); 
 } 
 */