*{
box-sizing:border-box;
}


body{

margin:0;

font-family:
-apple-system,
BlinkMacSystemFont,
"PingFang SC",
"Microsoft YaHei",
sans-serif;

background:#f5f5f7;

color:#1d1d1f;

}



.nav{

display:flex;

justify-content:space-between;

padding:20px 10%;

background:white;

}



.nav a{

margin-left:20px;

text-decoration:none;

color:#1d1d1f;

}



.hero{

text-align:center;

padding:100px 10% 60px;

}



.hero h1{

font-size:56px;

}



.hero p{

font-size:20px;

color:#6e6e73;

}



.products{

display:flex;

justify-content:center;

gap:40px;

padding:50px 10%;

flex-wrap:wrap;

}



.product{

background:white;

width:320px;

padding:40px;

border-radius:30px;

text-align:center;

}



.product h2{

font-size:32px;

}



.price{

font-size:40px;

font-weight:bold;

}



.btn{

display:inline-block;

margin-top:20px;

padding:12px 30px;

background:#111;

color:white;

border-radius:30px;

text-decoration:none;

}



.section{

padding:70px 10%;

text-align:center;

}



.section h2{

font-size:36px;

}



.table{

max-width:900px;

margin:auto;

background:white;

border-radius:25px;

overflow:hidden;

}



.row{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

padding:20px;

border-bottom:1px solid #eee;

}



.row div{

padding:10px;

}



.title{

font-weight:bold;

}



@media(max-width:700px){

.row{

grid-template-columns:1fr;

}

}