*{
	box-sizing: border-box;	
}
body{
	margin: 0;
	padding: 16px;
	font-family: Arial,sans-serif;
	background-color: #0b3b50;
	
}
main{
	display: grid;
	gap: 10px;
}

.cards-title{
	text-align: center;
	color: #fff;
	text-shadow: 2px 2px gray;
	text-transform: uppercase;
	font-size: 20px;
	background-color: skyblue;
	padding: 30px;
	border-radius: 10px;
}
.cards-container{
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	gap: 20px;
}

.card{
  background-color: skyblue;
  color: #0b3b36;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.buy-btn{
background-color: #fff;
color: #0b3b36;
font-size: 16px;
border: none;
padding: 8px 15px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
}
.buy-btn:hover{
  background-color: #0b3b36;
  color: #fff;
}


@media(max-width:700px ){
  .cards-container{
    grid-template-columns: 1fr;
  }
  .card{
    margin-bottom: 10px;
  }
}