*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:black;
font-family:Arial;
}

.container{
border:4px solid purple;
min-height:100vh;
}

/* NAV */

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 25px;
}

.logo{
height:35px;
}

.nav-icons{
display:flex;
gap:15px;
}

.nav-icons img{
width:24px;
cursor:pointer;
}

/* HERO */

.hero{
background:#e8e8e8;
height:320px;
display:flex;
justify-content:center;
align-items:center;
}

/* GRID */

.grid{
padding:50px 0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px;
justify-items:center;
}

.card{
width:170px;
height:170px;
background:#d9d9d9;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:15px;
font-size:11px;
text-decoration:none;
color:black;
}

.hero{
height:350px;
position:relative;
background:#e8e8e8;
overflow:hidden;
}

.video-container{
position:relative;
width:100%;
height:100%;
}

.hero-video{
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
}