body{

box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Red Hat Display, sans-serif;


}


.wrapper{

	display: grid;
	max-width: 1440px;
	background-image: url('../img/pattern-background-desktop.svg' );
	background-repeat: repeat-x;
	grid-template-columns: repeat(1, 1fr);
	background-color: hsl(225, 100%, 94%);
	font-size: 16px;
	height: auto;
	


}

.container{

	margin: 200px auto;
	max-width: 400px;
	height: auto;
	background: white;
	border-radius: 20px;
	box-shadow: 1px 1px 25px hsl(223, 47%, 23%);
	display: grid;
	grid-template-columns: repeat(1, 1fr);

}

.top img{

	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	width: 100%;

}

.top p{
	color: hsl(224, 23%, 55%);
	opacity: 70%;
	text-align: center;
	margin: 15px;
	font-weight: 500;
}



.top h1{

	text-align: center;
}


.last{

margin: 25px;
background: hsl(225, 100%, 98%);
max-width: 400px;
height: 100px;
border-radius: 7px;
display: flex;


}


.last img{margin: auto;
	

}

.price p{

	color: hsl(224, 23%, 55%);
	font-weight: 200;
}

.change{
	margin: auto;
	color:hsl(245, 75%, 52%) ;
}

.change a{
	color: hsl(245, 75%, 52%) ;
	font-weight: 600;
}

.last h4{

	margin-right: 30px;
}



.btn{
	background: hsl(245, 75%, 52%);
	color: #fff;
	padding: 10px;
	margin: auto 30px;
	border-radius: 7px;
	text-align: center;
	box-shadow: 2px 10px  10px hsl(224, 23%, 55%);
	font-weight: 600;
}

.btn a{

	text-decoration: none;
	color: white;
}



 h5 , a{
	text-align: center;
	margin-top: 40px;
	text-decoration: none;
	color: hsl(224, 23%, 55%);
}

h1, h4{
	color: hsl(223, 47%, 23%);
}

@media(max-width: 375px){.container{grid-template-columns: repeat(1, 1fr);}}