.bento{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:22px;
}

.card{
position:relative;
background:rgba(15,23,42,.85);
padding:35px;
border-radius:24px;
border:1px solid rgba(255,215,0,.18);
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 0 30px rgba(255,215,0,.15);
}

.glass{
background:rgba(255,255,255,.05);
border:1px solid rgb(255 249 0);
}


.card{
background:rgba(15,23,42,.85);
padding:35px;
border-radius:26px;
border:1px solid rgba(255,215,0,.18);
transition:.35s;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 0 35px rgba(255,215,0,.12);
}

.large{
grid-row:span 2;
min-height:470px;
}

.wide{
grid-column:span 2;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
}

footer{
padding:50px;
text-align:center;
color:#64748b;
margin-top:70px;
}

@media(max-width:900px){
.bento{
grid-template-columns:1fr;
}

.large,.wide{
grid-column:auto;
grid-row:auto;
min-height:auto;
}

.hero h1{
font-size:48px;
}
}