section
{
position: relative;
height: 150vh;
width: 100%;
}
.tittle
{
position: relative;
width: 100%;
text-align: center;
font-size: 35px;
font-weight: 500;
text-transform: uppercase;
font-family: 'Montserrat',sans-serif;
letter-spacing: 2.5px;
padding: 20px 0;
}
.product
{
position: relative;
float: left;
width: calc(100%/4);
height: 50vh;
margin: 2vh 0;
}
.name
{
position: relative;
display: block;
margin: 0 auto;
width: 90%;
font-size: 24px;
height: 22%;
text-align: center;
font-family: 'DM Sans',sans-serif;
text-decoration: none;
color: #000000;
background-color: #FF9444;
border-radius: 15px;
transition: 0.3s;
padding: 1vh 1vw;
}
.name:hover
{
color: #FFFFFF;
background-color: #006D79;
}
.img
{
position: relative;
display: block;
margin: 0 auto;
width: 90%;
height: 78%;
}
	.img img
	{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 90%;
	transform: translate(-50%, -50%);
	border-radius: 15px;
	transition: 0.3s;
	}
	.img img:hover
	{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.1);
	}
	.res
	{
	display: none;
	}
@media screen and (max-width: 900px)
{
section
{
height: 250vh;
}
.product
{
width: calc(100%/3);
height: 60vh;
}
.name
{
height: 30%;
}
.img
{
height: 70%;
}
	.res
	{
	display: inherit;
	}
}
@media screen and (max-width: 700px)
{
section
{
height: 540vh;
}
.product
{
width: calc(100%/2);
height: 60vh;
}
	.res
	{
	display: none;
	}
}
@media screen and (max-width: 700px)
{
.product
{
width: 100%;
height: 60vh;
}
}